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

this show tooltip when hovering on label of checkbox , 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 checkbox checked.",   placement: "right" }) 

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

how can make tooltip disappear when checkbox checked/unchecked?

here's js fiddle reproducing problem: http://jsfiddle.net/elax5hdq/5/

just fyi although has been answered.

for future reference when tooptip shown bootstrap fires show.bs.tooltip event. way can conditionally check something. if pass event function can run event.preventdefault() if condition fails , not want tooltip show.

http://jsfiddle.net/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');     } });