Popover hover behaviour

Anvil Q&A
1

Hi Stu,

Hello again.

I just came across this ‘popover’ dependency and it is really great for creating floating menus.

When using ‘hover’, how can I enable the feature that the pop does not disappear if the mouse moves into the pop (which has links for sub menus)?

I understood the conflict was

  1. On one hand, I would like to preserve ‘dismiss on outside click as true’ for default.

  2. On another hand, when the mouse enters the pop, the popper detects ‘hover off’ event and dismiss the pop, due to ‘dismiss on outside click’. I do not want this to happen

To resolve this, would it require changing the following function in ‘popover’ so that when ‘mouseenter’ happens, the dismiss_on_outside_click is not executed?

def dismiss_on_outside_click(dismiss=True):
    """hide popovers when a user clicks outside the popover
    this is the default behavior 
    """
    _document.body.removeEventListener('click', _hide_popovers_on_outside_click)
    if dismiss:
        _document.body.addEventListener('click', _hide_popovers_on_outside_click, True)

I do not know Jquery to make this change. Would you kindly help? Many thanks.

Huarong

2

It’s actually not because of dismiss on outside click.

It’s just the default behaviour for the trigger being hover. The popover implementation expects that a hover trigger should show and hide the popover when you enter and leave the component - acting like a tooltip rather than allowing the popover to be interacted with.

Are you looking for the behaviour:
A) dismiss when we leave either the component or the popover (sticky otherwise)?
B) show when hovered. Dismiss when click away.

For option B this should work, combining popovers with AnvilAugment:

from popover import popover
from AnvilAugment import augment

class Form1(Form1Template):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    # Any code you write here will run when the form opens.
    self.link_1.popover(content='some content')
    augment.set_event_handler(self.link_1, 'mouseenter', self.link_mouseenter)
    
  def link_mouseenter(self, **event_args):
    if not self.link_1.pop('is_visible'):
      self.link_1.pop('show')

For option A) I’ll have to have a play around and think about it.
I do think it’s definitely an option that we can add.

There’re plenty of examples online of others trying to do the same thing so I’ll see which implementations out there do it best.

something like stick=True when combined with trigger='hover' would be nice…

3

Thank you for the quick response, Stu.

Option B worked well for a single link, but when I replicated for two links, only the first one would work. If I turned off the first, the second one would work well. I double checked my codes but basically I have

from popover import popover
from AnvilAugment import augment

class Form1(Form1Template):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    # Any code you write here will run when the form opens.
    self.link_1.popover(content='some content')
    self.link_2.popover(content='some content')
    augment.set_event_handler(self.link_1, 'mouseenter', self.link_mouseenter)
    augment.set_event_handler(self.link_2, 'mouseenter', self.link_2_mouseenter)
    
  def link_mouseenter(self, **event_args):
    if not self.link_1.pop('is_visible'):
      self.link_1.pop('show')
  def link_2_mouseenter(self, **event_args):
    if not self.link_2.pop('is_visible'):
      self.link_2.pop('show')

Option A would be nice but Option B would be good enough if working for multiple links.

Huarong

4

Please update AnvilAugment. This was the bug that was recently fixed (I hope).

5

Indeed it worked well. Thank you again.

6

I think I’ve added the feature to the popover dependency. If you update popovers and use the trigger stickyhover then hopefully it’ll just work.
(note you’ll want to comment out the mouseenter event handler you’ve added)

7

Much more natively supported and saves quite a bit codes. Works perfect. Thank you, Stu.

8

fyi - 'stickyhover' was recently broken by a minor bootstrap update.

If using popover as part of anvil_extras this will be fixed in the next version release.
(This is the preferred way to use popovers as this is where the dependency is maintained)

If using the original popover dependency you can update your version of the dependency by replacing the code in your dependency to the latest version.
See the original post for clone links and other ways to get the source code.