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:closed
  • Created 4 years ago
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

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 and deploy preview

We should have 2.0.0 stable released this week.

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)

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found