Bootstrap button tooltip hide on click

Question

On my site I have some buttons. When a user clicks the button, a modal opens. When a user hovers the button, a tooltip is shown.

Is use this code:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default" data-toggle="modal" data-target="#DeleteUserModal">
  <span class="glyphicon glyphicon-remove"></span>
</button>

<div>modal</div>

<script>
$(document).ready(function(){
  $('[rel="tooltip"]').tooltip();
});
</script>

This works, but the only problem is that the tooltip stays visible after the button is clicked, and the modal is shown. As soon as the modal is closed, the tooltip is hidden again.

How to prevent this? I only want the tooltip to be shown on hover, and not all the time when the related modal is visible.

use $('[rel=tooltip]').tooltip('disable') in your onclick function — Nitin Dhomse
– Nitin Dhomse, Commented Jan 29, 2016 at 8:07

Mbrouwer88 · Accepted Answer · 2016-01-29 09:24:03Z

64

Fixed it by using.

$(document).ready(function(){
    $('[rel=tooltip]').tooltip({ trigger: "hover" });
});

The problem was that focus stays on the button when the modal is open. Changing the trigger to hover solves the problem.

answered Jan 29, 2016 at 9:24

Mbrouwer88

2,3024 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Prof Over a year ago

This helps, but i still have a similar issue with a dropdown toggle tooltip. On a button with a dropdown, i have a tooltip on the button and when you click it, the dropdown shows but the tooltip remains visibile, tempted to $('body').click( hide all tooltips )

Muhammad Adnan · Accepted Answer · 2018-06-23 06:59:30Z

27

For your whole project hide tooltip

   $(document).ready(function(){
       $('[data-toggle="tooltip"]').click(function () {
          $('[data-toggle="tooltip"]').tooltip("hide");

       });
   });

answered Jun 23, 2018 at 6:59

Muhammad Adnan

4224 silver badges11 bronze badges

Comments

Steve K · Accepted Answer · 2016-01-29 09:01:39Z

5

You should open the modal manually with an on click function and hide the tooltip manually via jquery. So take the modal toggling attributes out of the button like so:

<button type="button" rel="tooltip" title="Tooltip content" class="btn btn-sm btn-default">
  <span class="glyphicon glyphicon-remove"></span>
</button>

and then open the modal with your own jquery onclick function as well as hide the tooltip at the same time like so:

$(document).ready(function(){
  $('[rel="tooltip"]').tooltip();
  $('[rel="tooltip').on('click', function () {
    $(this).tooltip('hide');
    $("#DeleteUserModal").modal();
  });
});

Here is a fiddle to show you this working Fiddle

answered Jan 29, 2016 at 9:01

Steve K

9,1353 gold badges26 silver badges43 bronze badges

Comments

Eric Aya · Accepted Answer · 2018-09-18 17:02:37Z

5

Try to use this Javascript code, I just tried it, and it worked for me.

$(function () {
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]'
    }).click(function () {
        $('[data-toggle="tooltip"]').tooltip("hide");
    });
})

edited Sep 18, 2018 at 17:02

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Sep 18, 2018 at 17:02

RKS

511 silver badge3 bronze badges

Comments

tyrodeveloper · Accepted Answer · 2017-09-28 17:39:52Z

2

If you want to close the tooltip before an action, can use this:

$('[data-toggle="tooltip"]').tooltip("hide");

For example, i want to close the tooltip before open modal, here my code:

function OpenModal() {
    $('[data-toggle="tooltip"]').tooltip("hide");
    $("#myModal").modal();
}

answered Sep 28, 2017 at 17:39

tyrodeveloper

1411 silver badge6 bronze badges

Comments

Eric Aya · Accepted Answer · 2018-09-18 17:02:54Z

2

Inside your document ready function use this:

   $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip({
               trigger : 'hover'
            });
    });

edited Sep 18, 2018 at 17:02

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Jul 26, 2018 at 6:11

Siva Ganesh

1,4532 gold badges18 silver badges28 bronze badges

1 Comment

mokumaxCraig Over a year ago

Only thing that worked for me.

Yani · Accepted Answer · 2022-11-15 23:47:51Z

1

You could also remove the focus on the button using .blur():

$('[data-toggle="tooltip"]').on('click', function(e){
    $(this).blur();
});

answered Nov 15, 2022 at 23:47

Yani

4526 silver badges15 bronze badges

Comments

mokiSRB · Accepted Answer · 2016-01-29 08:05:48Z

0

Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.

answered Jan 29, 2016 at 8:05

mokiSRB

1,1828 silver badges18 bronze badges

3 Comments

Mbrouwer88 Over a year ago

I tried wrapping the button with <div rel="tooltip" title="test"></div> and removing the tooltip from the button itself. Same effect.

mokiSRB Over a year ago

Add data-toggle="tooltip" don't use rel.

Mbrouwer88 Over a year ago

Sorry, same effect. It seems somehow the "focus" stays on the button bacause it's been clicked I can still see the "glow" around the button in the background when the modal is open.

Pankaj Upadhyay · Accepted Answer · 2018-01-10 11:41:27Z

0

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });
});

answered Jan 10, 2018 at 11:41

Pankaj Upadhyay

2,12022 silver badges23 bronze badges

2 Comments

randominstanceOfLivingThing Over a year ago

Explanation should help.

Jeff Zeitlin Over a year ago

While the code given may solve the querent's problem, it would be more helpful to have an explanation of what the code does and why it solves the problem posed. Code without explanation is less useful to future querents looking to solve similar problems.

Scotty G · Accepted Answer · 2019-08-27 19:23:39Z

0

I know this is old but here is the easiest fix for a tooltip on a button to launch a modal ...

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
    <span data-toggle="modal" data-target="#exampleModal">Tooltip & modal</span>
</button>

Put the tooltip and modal on 2 separate elements.

answered Aug 27, 2019 at 19:23

Scotty G

4223 silver badges8 bronze badges

Comments

Bondigo · Accepted Answer · 2020-11-18 11:14:48Z

0

Bootstrap 3 button tooltip hover and click:

$(document).ready(function(){
  $('.btn-primary').tooltip({
        template: '<div class="tooltip svg__icon_c_tooltip_right" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
        title: 'Tooltip Example',
        html: true,
        placement: 'right',
        delay: 250
    });
});

$('.btn-primary').on('shown.bs.tooltip', function() {
    $(this).attr('data-tooltip', 'loaded');
});

$('.btn-primary').on('hide.bs.tooltip', function() {
    $(this).attr('data-tooltip', 'hidden');
});

$('.btn-primary').on('click', function() {
    var _tooltip = $(this).attr('data-tooltip');

    switch(_tooltip) {
    case 'loaded':
      if ($(this).next().hasClass('tooltip')) {
        $(this).tooltip('hide');
      } else {
        $(this).tooltip('show');
      }
      break;
    case 'hidden':
      $(this).tooltip('show');
      break;
    }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div style="margin-top: 20px">
    <button type="button" class="btn btn-primary">Tooltip</button>
  </div>   
</div>
</body>
</html>

edited Nov 18, 2020 at 11:14

answered Nov 18, 2020 at 10:44

Bondigo

11 bronze badge

1 Comment

Elletlar Over a year ago

Hi Bondigo. Welcome to Stack Overflow. While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. How to Answer. Kind Regards.

cssyphus · Accepted Answer · 2025-01-27 14:46:37Z

0

Bootstrap 5

To programmatically hide a specific tooltip when desired, you must first get a handle to the DOM element that triggers the tooltip, then use the .hide() method.

Example:

const ttEl = document.getElementById('#someElementWithATT');
const tTip = bootstrap.Tooltip.getInstance(ttEl);
tTip.hide();

Reference:

https://getbootstrap.com/docs/5.0/components/tooltips/
(Scroll down to "getInstance" heading)

answered Jan 27 at 14:46

cssyphus

40.5k21 gold badges104 silver badges125 bronze badges

Collectives™ on Stack Overflow

Bootstrap button tooltip hide on click

12 Answers 12

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

3 Comments

2 Comments

Comments

1 Comment

Bootstrap 5

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

3 Comments

2 Comments

Comments

1 Comment

Bootstrap 5

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related