Question

176

Bootstrap Tooltip - Hide when another tooltip is click

rated 0 times [ 180] [ 4] / answers: 1 / hits: 69038 / 11 Years ago, mon, june 24, 2013, 12:00:00

I hope someone can help.

I'm trying to hide the tooltip when another tooltip icon is clicked. It works but when I decide to click the last tooltip again it 'flashes' the tooltip.

var Hastooltip = $('.hastooltip');

HasTooltip.on('click', function(e) {

     e.preventDefault();

     HasTooltip.tooltip('hide');

}).tooltip({

     animation: true

}).parent().delegate('.close', 'click', function() {

     HasTooltip.tooltip('hide');

});

HTML

<a href=# class=hastooltip data-original-title=Lorem ipsum dolor sit amet, consectetur adipisicing elit.>

    <h3>Info 1</h3>

</a>



<a href=# class=hastooltip data-original-title=Lorem ipsum dolor sit amet, consectetur adipisicing elit.>

    <h3>Info 2</h3>

</a>

If it helps a following markup is added to the DOM when the user clicks on the button to display the tooltip.

<div class=tooltip</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

quinn

Add To Favorites

Follow

Total Points: 160

Total Questions: 86

Total Answers: 101

Location: Belarus

Member since Tue, Mar 14, 2023

1 Year ago

answered 11 Years ago cruzs · Accepted Answer

You need to check if the tooltip is showing and toggle its visibility manually. This is one way of doing it.

$(function() {

  var HasTooltip = $('.hastooltip');

  HasTooltip.on('click', function(e) {

    e.preventDefault();

    var isShowing = $(this).data('isShowing');

    HasTooltip.removeData('isShowing');

    if (isShowing !== 'true')

    {

      HasTooltip.not(this).tooltip('hide');

      $(this).data('isShowing', true);

      $(this).tooltip('show');

    }

    else

    {

      $(this).tooltip('hide');

    }



  }).tooltip({

    animation: true,

    trigger: 'manual'

  });

});