This will show a tooltip when hovering over the label of a checkbox and hide when not hovering.

HTML:

<div style="margin: 2em 0 0 2em">
  <label id="checkbox-label">
  <input type="checkbox">Checkbox</label>
</div>

JS:

$('#checkbox-label').tooltip({
  title: "This tooltip won't disappear when the checkbox is checked.",
  placement: "right"
})

The problem is when a user checks or unchecks the checkbox, the tooltip doesn't hide until the user clicks somewhere else on the screen.

How can I make this tooltip disappear when the checkbox is checked/unchecked?

Here's a JS Fiddle reproducing the problem: /

This will show a tooltip when hovering over the label of a checkbox and hide when not hovering.

HTML:

<div style="margin: 2em 0 0 2em">
  <label id="checkbox-label">
  <input type="checkbox">Checkbox</label>
</div>

JS:

$('#checkbox-label').tooltip({
  title: "This tooltip won't disappear when the checkbox is checked.",
  placement: "right"
})

The problem is when a user checks or unchecks the checkbox, the tooltip doesn't hide until the user clicks somewhere else on the screen.

How can I make this tooltip disappear when the checkbox is checked/unchecked?

Here's a JS Fiddle reproducing the problem: http://jsfiddle/eLax5hdq/5/

• javascript
• jquery
• html
• twitter-bootstrap
• checkbox

5 Answers 5

I just ran into the same problem, but came up with a different solution:

$('#checkbox-label').on('show.bs.tooltip change', function (e) {
    $(this).blur();
});

Just FYI although this has been answered.

For future reference when the tooptip is about to be shown bootstrap fires the show.bs.tooltip event. This way you can conditionally check for something. if you pass the event to the function you can run event.preventDefault() if the condition fails and you do not want the tooltip to show.

http://jsfiddle/SeanWessell/eLax5hdq/9/

$('#checkbox-label').on('show.bs.tooltip change', function (e) {
    $this = $(this);
    if (e.type == 'show' && $this.find(":checkbox").is(":checked")) {
        e.preventDefault();
    } else if (e.type == 'change') {
        $this.find(":checkbox").is(":checked") ? $this.tooltip('hide') : $this.tooltip('show');
    }
});

Use $(this).tooltip("hide") and not $(this).tooltip("close") as .tooltip() dose not support a parameter with the value "close".

Fiddle Example

As noted in the Bootstrap documentation the methods that tooltip supports are: .tooltip('hide'), .tooltip('show'), .tooltip('toggle'), and .tooltip('destroy').

Answering my own question with an easier solution, but I'll leave the accepted answer as is.

Bootstrap shows a tooltip on hover and focus by default. Clicking on the checkbox left the element in focus, which is why the tooltip wouldn't hide without some extra code, as shown in the other two answers to this question.

The fix was to specify that I only want the tooltip on hover by adding data-trigger="hover" to the <label> element.

In summary, change this:

<div>
  <label id="checkbox-label">
    <input type="checkbox">Checkbox
  </label>
</div>

To:

<div>
  <label id="checkbox-label" data-trigger="hover">
    <input type="checkbox">Checkbox
  </label>
</div>

The default value for trigger is 'hover focus', thus the tooltip stay visible after a button is clicked, until another button is clicked, because the button is focused.

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