Create a tooltip without UI triggers
See original GitHub issueIs your feature request related to a problem? Please describe…
I am unable to have a button with v-b-tooltip
directive that is exclusively triggered programmatically.
Describe the solution you’d like
A simple way to disable all UI triggers or empty the trigger list after its initialisation.
Describe alternatives you’ve considered
- Disabling the tooltip by default using
v-b-directive.disabled
, orv-b-tooltip="objRef"
with a property containingdisabled
, could potentially silence all events, but still make me able to hide or show the tooltip with theshow
property. - Passing an empty string currently falls back to the defaults (
click blur
), so passing an empty array through options could signify the explicit wish to keep triggers empty. - A trigger called
none
which prevents falling back to defaults.
Additional context
My use-case is an “Add item to cart”-button that should show “Item added to cart”-tooltip when the click event has propagated to the backend server, then, afterwards, hidden again automatically using delay.hide
.
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
Building a simple tooltip component that never goes off screen
How to build a simple, responsive and lightweight tooltip web component, with minimal HTML, CSS and JavaScript and no framework dependency.
Read more >How to Create an HTML Tooltip [+ Code Templates]
To make a simple tooltip, we'll first create the HTML element that triggers the tooltip when hovered over. We'll create this element as...
Read more >Display jquery ui tooltip without hover event - Stack Overflow
1 Answer 1 ... $(function(){ $(document).on('click', '.ui-tooltip-content', function(){ $("#input_box").trigger('mouseleave'); $("#input_box").
Read more >Tooltip Widget - jQuery UI API Documentation
Tooltip replaces native tooltips, making them themeable as well as allowing various customizations: Display other content than just the title, ...
Read more >Tooltips - Bootstrap
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@stigok @Hiws v2.0.0 stable will support
'manual'
trigger, where no event listeners (hover, focus, or click) are added to the trigger (target
) element, and the tooltip/popover can only be opened programmatically (i.e. via theshow
prop or instance/$root events). This is available for both component and directive versions (show
prop only on component version though).See PR https://github.com/bootstrap-vue/bootstrap-vue/pull/3908 and deploy preview https://deploy-preview-3908--bootstrap-vue.netlify.com/docs/components/tooltip
We should have 2.0.0 stable released this week.
The directive versions of tooltip/popover are meant to be quick and simple implementation alternatives to the more configurable component versions (which provide more flexibility).
Tooltips and Popovers are currently going through a re-write (to use our new internal portalling technique) and to make the directive versions more reactive to changes in modifiers and titles/content).
Perhaps once we get the conversion complete, you could add in a PR for the
none
trigger (or perhaps call itmanual
, as that is what the programmatic triggering is called in the Bootstrap v4.3 docs)