jquery - 当 jquery 获得焦点时， Bootstrap 工具提示不起作用

Question

我想在复选框输入中进行 Bootstrap ，当焦点位于复选框时会出现消息。这是我制作的代码:

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();  
        }
    });

请帮助我。谢谢你:)

Answer 1

您需要在场景中显示和销毁工具提示，默认情况下它们只会在鼠标进入时显示并在鼠标退出时隐藏。

您还需要将焦点事件绑定(bind)到单击事件，以确保它在使用鼠标而不仅仅是键盘时获得焦点。

  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');
});

工作示例: http://jsfiddle.net/MgcDU/1398/