Skip to content

[invokers] add some way to toggle a popover without considering interest state #1354

@Jamesernator

Description

@Jamesernator

Consider the following example where both an interestfor and commandfor target the same popover:

<button
  interestfor="my-popover"
  commandfor="my-popover"
  command="toggle-popover"
>?</a>
<div id="my-popover" popover="hint">Popover content</div>

in this example, clicking the button hides the popover, if clicked again it shows it but gets light dismissed on hovering the button again. It would be nice if we could have this work such that clicking the button makes the popover persist so that the user does not have to continue hovering over the button. (And can then dismiss the popover by clicking the button again).

I would like to propose either:

  • Changing the existing behavior: toggle-popover should not consider popovers shown by interestfor when deciding the toggle state, and losing interest should not clear an explictly opened popover (whether via toggle-popover/show-popover in HTML or the equivalent in JS).
    • I think this is preferable as I don't see how the current behavior is useful to either developers or users
  • Adding a new value and state to popovers (all names to be bike-shedded):
    • show-persistent-popover which shows a popover and prevents losing interest from the popover
      • and an equivalent JS api .showPopover({ preventDismissOnInterestLoss: true })
    • hide-persistent-popover which hides a popover that was shown via show-persistent-popover but doesn't hide a popover which is shown due to interest
      • and an equivalent JS api .hidePopover({ allowInterestToContinueShowing: true })
    • toggle-popover-persistent which is a combination of the above properties in the same way as toggle-popover

Just to clarify what the intended user flow would be:

  • Initially the popover is hidden
  • The user hovers the button and the popover is shown due to interest
  • The user clicks the button, this causes the popover to persist (not be hidden as current behavior)
  • The user can freely move their pointer around, the popover will persist (and hovering the button should not cause an implicit dismiss due to interest loss)
  • The user clicks the button again which causes the popover to no longer be persistent and will be light dismissed when the user stops hovering the button

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions