Popup: can be triggered on hover and click

[Obiwarn]

https://react.semantic-ui.com/modules/popup/#usage-multiple

The desired behaviour of a on={['hover', 'click']}popup is to stay open when clicked and the user hovers out of the trigger, right? So e.g. the user can copy sth. out of the popup.

Right now it closes on leave after you clicked. Which is uncommon UX IMHO.

[Fabianopb]

I could be wrong, but apparently SUI doesn't have the option to open the Popup with multiple triggers: https://semantic-ui.com/modules/popup.html#/settings. The documentation says that the trigger event can be "either focus, click, hover, or manual. "

So I think the question is, should SUIR support a behavior that differs from SUI? Also it feels weird to combine hover and click, as for clicking you have to hover over the element anyway.

Thoughts?

[Obiwarn]

I think hover and click make sense UX wise. The hover to show that there is a popup. And the Click if the user needs to copy sth. out of it.

[Fabianopb]

What about the hoverable prop, would that help you achieve what you're looking for? According to the docs it's a boolean to tell whether the Popup should close or not on hover.

[Obiwarn]

I could not get hoverable to work. Maybe this is a bug?

I tried:

  <Popup
    trigger={<Button icon='add' />}
    content="The default theme's basic popup removes the pointing arrow."
    basic
    hoverable
  />

[Fabianopb]

@Obiwarn, that's strange, could you try to play around with the docs to see if you can reproduce this behavior there? Or then provide a simple repo so we can investigate further?

I've tried the hoverable behavior in the docs and it seems to work as expected, here's a gif:

[Obiwarn]

Thank you for pointing that out. I didn't even recognize this behavior. I expected it to stay open until I click. Which still is the behavior that I would need.

[Fabianopb]

No problem, hoverable should cover what you need then! But I still think that the multiple trigger behavior is a bit weird... As I mentioned, to click you have to hover first, which already opens the Popup, so I don't see much point in having both at the same time. Moreover, SUI doesn't have that. So this could perhaps be removed to avoid confusion. What you think @layershifter?

[Fabianopb]

It's been a while since the last discussions, this is something I could work on (if we want to remove the multiple behavior or change something else). So I'm just pinging to keep it alive.

[averyga]

What if I need to show one popup on hover and another on click?

return (
  <CustomPopup
    content={
      <p>Some text<p/>
    }
    trigger={
      <Icon name="name"  onClick={() => this.setState({ changedToClick: true })} />
    }
    on={changedToClick ? 'click' : 'hover'}
  >
    <p>Another content with long text text text text text text text text text text text text text text</p>
  </CustomPopup>
)

I'm clicking while hovering over an icon, child content expends popup and it shifts to the right and looks not good, is there any way to fix this?

on hover

on click

[katus-ngo]

<

@Obiwarn, that's strange, could you try to play around with the docs to see if you can reproduce this behavior there? Or then provide a simple repo so we can investigate further?

I've tried the hoverable behavior in the docs and it seems to work as expected, here's a gif:

It still works at the home page. But in my project it does work incorrectly and heterogeneously. If I do slowly, it will show up a little longer.

<Popup trigger={...} content={'...} hoverable position='right center' />

Sorry if my gif not good.

[stale[bot]]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!