Question

I want to make bootstrap in checkbox input, when focus on checkbox so appear message. so this is code that my made:

html

<label class="checkbox inline"><input type="checkbox" class="centang-semua-faktur tooltip-atas" rel="tooltip"> <b>Cetak</b></label>

jquery

    var $checkAllFaktur = $('.centang-semua-faktur');

    $checkAllFaktur.on('focus', function() {
        if ($(this).is(':checked')){
            $checkAllFaktur.attr('title', 'Hapus Centang Semua').tooltip();  
        }else{
            $checkAllFaktur.attr('title', 'Centang Semua').tooltip();  
        }
    });

please help me. thank you 🙂

Answer 1

You need to show and destroy the tooltips in your scenario, by default they will only show on mouseenter and hide on mouseout.

You will also need to bind the focus event to the click event to ensure it gains focus when using the mouse and not just the keyboard.

  var $checkAllFaktur = $('.centang-semua-faktur');

$checkAllFaktur
.on('click', function() {
    $(this).trigger('focus')
})
.on('focus', function() {
    if ($(this).is(':checked')){
        $checkAllFaktur.attr('title', 'Hapus Centang Semua').tooltip('show');  
    }else{
        $checkAllFaktur.attr('title', 'Centang Semua').tooltip('show');  
    }
})
.on('blur', function(){
  $(this).tooltip('destroy');
});

Working example:
http://jsfiddle.net/MgcDU/1398/