Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create a tooltip without UI triggers

See original GitHub issue

Is 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, or v-b-tooltip="objRef" with a property containing disabled, could potentially silence all events, but still make me able to hide or show the tooltip with the show 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 GitHub Comments

2reactions

tmorehousecommented, Aug 28, 2019

@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 the show 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.

1reaction

tmorehousecommented, Jun 5, 2019

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 it manual, as that is what the programmatic triggering is called in the Bootstrap v4.3 docs)

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.

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...

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").

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, ...

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:...