Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip doesn't disappear on hover out #3717

Closed
chipit24 opened this issue Jul 19, 2019 · 8 comments
Closed

Tooltip doesn't disappear on hover out #3717

chipit24 opened this issue Jul 19, 2019 · 8 comments

Comments

@chipit24
Copy link

@chipit24 chipit24 commented Jul 19, 2019

Describe the bug

When quickly moving the cursor over a list of items that have a tooltip, the tooltip doesn't always disappear, but remains "suck" in the hover state.

Steps to reproduce the bug

  1. Create a list of items that each show a tooltip on hover.
  2. Move the cursor over the list, and observe that occasionally one of the tooltips doesn't disappear on hover out.

Expected behavior

Regardless of how quickly a user hovers over or out of an element, if a tooltip appears, it should disappear if the cursor is no longer over the element.

Versions

Libraries:

  • BootstrapVue: 2.0.0-rc.26
  • Bootstrap: 4.3.1
  • Vue: 2.6.10

Environment:

  • Device: MacBook Pro
  • OS: macOS Mojave 10.14.5
  • Browser: Chrome
  • Version: 75

Demo link

CodeSandbox: https://codesandbox.io/embed/determined-boyd-xezui

Additional context

Gif of bug:
bs_vue_tooltip_hover_bug

We use a similar layout to the one in CodeSanbox, but with a larger, more complex list, and the hover issue appears much more frequently, even without very quick mouse movement.

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Jul 19, 2019

This is a known issue: #2937 (also applies to popovers)

And will hopefully be fix once we have 2.0.0 stable released.

You can add a delay to the tooltip which will help mitigate this issue:

https://jsfiddle.net/jdw2Lhy0/

Loading

@chipit24
Copy link
Author

@chipit24 chipit24 commented Jul 19, 2019

Thanks! I just searched open issues so I didn't see that.

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Aug 24, 2019

PR #3908 should have this fixed (once it is completed and merged into 2.0.0 stable branch)

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Sep 7, 2019

BootstrapVue v2.0.0 stable has been released. See https://bootstrap-vue.js.org/docs/misc/changelog

Loading

@jschoedt
Copy link

@jschoedt jschoedt commented Apr 23, 2020

I still experience this issue on v2.12.0. If you disable the button after a click eg. to prevent repeated clicks:
<b-button v-b-tooltip.hover.d50 title="Title" @click="create" :disabled="isDisabled"/>
The tooltip stays visible until the button is enabled and you hover again.

Is this intended behavior?

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Apr 23, 2020

That is intended behaviour. If the trigger element becomes disabled, the tooltip/popover will remain in the state that it was at when the trigger element was disabled. The triggers (hover/unhover, focus/blur, click/click) each need to be cleared in order for the tooltip/popover to close, and a disabled element will not trigger any of those events.

Loading

@jschoedt
Copy link

@jschoedt jschoedt commented Apr 23, 2020

Just for reference. To solve this "issue" you can wrap the button in an element:
<span v-b-tooltip.hover.d50 title="Title"><b-button @click="create" :disabled="isDisabled"/></span>

Loading

@rebinnaf
Copy link

@rebinnaf rebinnaf commented Jun 3, 2020

https://codesandbox.io/s/crazy-leftpad-j1b2c?file=/App.vue

I think that it is not an expected behavior that the tooltip sticks there when the button becomes disabled. When I put it in a span, it has some other problems. Is there any proper solution to fix this?

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants