Anvil Community Forum

Implementing Popovers (floating forms)

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
https://anvil.works/build#clone:RLLQ34XAY246K5R3=GHWGRATGFV2QGVPGZLENYSA4

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 popover as a dependency, so you might need to add this dependency manually…
https://anvil.works/build#clone:YRRNNZJZV5IJM6NX=ACDZQ3LRIADCMMGFANOJZG5N

Pvifyo5Sh3

edit - thanks @david.wylie clone links now correct

8 Likes

That is very nice!

1 Like

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)

2 Likes

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