CODEWITHSUNDEEP
javascripttwitter-bootstraptooltip
vikas devde
vikas devde

Reputation: 11751

How to make bootstrap tooltip remain visible till the link is clicked

I have a link which I am going to use as notification when a user has some new notification I am going to notify the user by showing a tooltip(twitter bootstrap tooltip). What I want to achieve is, that tooltip should remain visible till the user clicks the link. once the user clicks the link, the tooltip should destroy. this is what I have till now, http://jsfiddle.net/testtracker/QsYPv/

HTML

<p><a href="#" rel="tooltip" data-original-title="you have 2 notifications">Notification</a>.</p>​

JavaScript

$('p a').tooltip({placement: 'bottom'}).tooltip('show');​

What's happening there is, tooltip stays visible till you hover it, and takes its default behaviour (show on hover) once you hover it.

I hope I have given proper info and cleared what I want to do.

Upvotes: 42

Views: 73549

Answers (3)

Stevie-Ray Hartog
Stevie-Ray Hartog

Reputation: 421

For bootstap 5 you can use:

    // get all tooltips
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    // loop trough tooltips
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => {
        const tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
        // make tooltips visible on load
        tooltip.show()
        // keep tooltips in view
        tooltipTriggerEl.addEventListener('hide.bs.tooltip', (e) => {
            e.preventDefault()
        })
        return tooltip
    })

Upvotes: 1

vikas devde
vikas devde

Reputation: 11751

Here is the solution http://jsfiddle.net/testtracker/QsYPv/8/

Added the option "trigger"

$('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');

then, with this line 

$('p a').on('click',function(){$(this).tooltip('destroy');});

destroy tooltip on click.

Upvotes: 76

Nathan Wheeler
Nathan Wheeler

Reputation: 5932

You can add a variable to trigger off the mouseleave event to re-show the tooltip, and then as you said in your comment, just destroy the tooltip when clicked, so it doesn't show when you mouseover again:

var clickedNotify = false;
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
$('p a').mouseleave(function() { if (!clickedNotify) { $('p a').tooltip({placement: 'bottom'}).tooltip('show'); } });
$('p a').click(function() { clickedNotify = true; $(this).tooltip('destroy'); });

This way, the tooltip is always shown, even after a mouseleave, until the link is clicked. After the link is clicked, the tooltip is destroyed, and still won't generate javascript errors on the page on mouseleave.

Upvotes: 4

Related Questions