Implementing Popovers (floating forms)

[stucork]

Update Sep 2021
This dependency is now maintained as part of anvil-extras
To add the depenency simply add anvil-extras as a third party dependency: C6ZZPAPN4YYF5NVJ.

popover can be used as an individual dependency
with the third party dependency code: RLLQ34XAY246K5R3.
The source code is identical to anvil-extras but may differ by version number.

Documentation: Popovers — Anvil Extras documentation

---

This is both a show and tell and a feature request.

I wanted to use popovers in some of my apps. You can find examples in bootstrap’s documentation here and here.

I think it would be great if it they were native to anvil. But since they’re not, I’ve made something that might be useful to others.

I tried to make it as similar to alerts as I could

Use this popover anvil app as a dependency

Login

Once you’ve added the dependency to your app, in the form you want popovers write:
from popover import popover

This will add popover functionality to links and buttons.

Now call the newly created button method popover e.g.

self.button = Button()
self.button.popover(content='example text', title='Popover')

This will add a popover to your button when it is clicked.

You can also add forms to the popovers

from .Form2 import Form2
...
self.button.popover(content=Form2())

Form2 will also be aware of the ‘popper’ since it now has an attribute self.popper

Here are the two methods that are added to the Button and Link classes.

def popover(self, content, 
            title='', 
            placement = 'right',
            trigger = 'click',
            animation = True, 
            delay={ "show": 100, "hide": 100 }
           ):
  """should be called by a button or link
  content - either a string or an anvil component or Form
  title - a string
  placement -  right, left, top, bottom (for left/right best to have links and buttons inside flow panels)
  trigger - manual, focus, hover, click
  animation - True or False
  delay - {'show': 100, 'hide': 100}

  if the content is a form then the form will have an attribute self.popper added """

def pop(self,behaviour):
  """ trigger some behaviour of the popover.
  behaviour can be any of:
  show, hide, toggle, dispose, enable, disable, toggleEnabled, update"""

for some more examples see this app, which uses anvil_extras as a dependency…

Login

[david.wylie]

That is very nice!

[bridget]

This is fantastic! Would you be happy for us to add this to the Anvil Component Library?

If so, what name would you like to be credited as? (I’ll just use your forum username if you don’t want your name out there)

[stucork]

@bridget - of course! feel free to add it to the component library.

[advancedhealthsys]

This is very awesome! Thank you @stucork

[advancedhealthsys]

Hi @stucork

Quick question, is there anyway you can prevent the popover object from moving with the whole screen when scroll down/up/right/left, perhaps makes it disappear?
As you can see in the image it moves with the scrolling…

Thank you!

[stucork]

Sure - that’s done for you. Clone link updated.

[steve1]

First, let me say that this feature is fantastic!

I was wondering if there is a way to make a specific popover in my form not dismiss when clicked outside of the popover without changing all of them to this default?

[stucork]

Nice idea.

I’ve added that feature.

Default:
All popovers are dismissed when you click away from them

Override
override this behaviour for all popovers

from popover import popover
popover.dismiss_on_outside_click(False)

Or
override for an individual popover

self.button_1.popover(content='foo', auto_dismiss=False)

I’ve included this as part of the example

[steve1]

Fantastic! Thanks for your quick response.

[jsardonicus]

@stucork do you have an example of how to use a link with a manual trigger? When I try to do so in the same pattern for a manual trigger, nothing happens. See Anvil | Login

The code I was trying:

self.link_1.popover(‘No Animation’,
placement=‘bottom’,
animation=False,
trigger=‘manual’
)

[jsardonicus]

Disregard. I had to add a click handler to call self.link_1.pop('toggle')

[hugetim]

PSA: This add-on is now a part of Anvil Extras, and the most up-to-date version can be found there.