Tooltip on bootstrap checkbox label doesn't hide when marking / clearing the checkbox

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://ift.tt/1LoxlPD