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

how to hide tooltip with directive usage in an attempt to hover over its title? (like in original bootstrap) #4556

Closed
7iomka opened this issue Jan 6, 2020 · 4 comments · Fixed by #4563, mariazevedo88/hash-generator-js#24 or tghelere/CL#8

Comments

@7iomka
Copy link

@7iomka 7iomka commented Jan 6, 2020

Hi!
Please, help me;
How to achieve default behavior for a tooltip when it is hiding in an attempt to hover over its title (content of tooltip)?
I prefer this behavior: http://jsfiddle.net/vdzvvg6o/
With bootstrap-vue I used directive variant v-b-tooltip.hover = { title: someTitle, container: relativeContainerId }
Thanks!

@jackmu95

This comment has been minimized.

Copy link
Member

@jackmu95 jackmu95 commented Jan 7, 2020

@7iomka You are right; the behavior between Bootstrap and BootstrapVue is different.
IMHO we should make the behavior configurable since I see a need for both cases.

@Hiws

This comment has been minimized.

Copy link

@Hiws Hiws commented Jan 7, 2020

A temporary workaround for this could be to apply a class with the style pointer-events: none; to each tooltip where you want that behaviour.

<b-btn v-b-tooltip.hover="{ customClass: 'my-tooltip-class' }" title="Good job!">
  Hover me
</b-btn>

<style>
.my-tooltip-class {
  pointer-events: none;
}
</style>
@7iomka

This comment has been minimized.

Copy link
Author

@7iomka 7iomka commented Jan 7, 2020

A temporary workaround for this could be to apply a class with the style pointer-events: none; to each tooltip where you want that behaviour.

Thanks for the solution. For compatibility, since bootstrap-vue adds a separate b-tooltip class to tooltip, I added pointer-events: none; to .b-tooltip to achieve compatibility, and only in rare cases when there is a need for the availability of mouse events on the tooltip content would I make suggestions to add interactive mod for directive or option for plugin, with false value by default, since in fact I don’t understand why this behavior is now true by default.

@jackmu95 jackmu95 added this to To do in 2.2.0 via automation Jan 7, 2020
@jackmu95 jackmu95 removed this from To do in 2.2.0 Jan 7, 2020
@jackmu95 jackmu95 added this to To do in 2.3.0 via automation Jan 7, 2020
@jackmu95 jackmu95 removed this from To do in 2.3.0 Jan 7, 2020
@jackmu95 jackmu95 added this to To do in 2.2.0 via automation Jan 7, 2020
2.2.0 automation moved this from To do to Done Jan 8, 2020
jackmu95 added a commit that referenced this issue Jan 8, 2020
* feat(b-tooltip): add `interactive` prop

* Update package.json

* Update README.md

* Update README.md

* Replace `interactive` prop/modifier by `noninteractive`

* Update _tooltip.scss

* Update README.md

* Update _tooltip.scss

* Update _popover.scss

* Update package.json

Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Jan 9, 2020

BootstrapVue v2.2.0 has been released.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
2.2.0
  
Done
4 participants
You can’t perform that action at this time.