javascript - 工具提示隐藏/显示在 Bootstrap 中不起作用

Question

我使用 bootstrap 3 并有一个按钮和输入。如果按钮被禁用，我想显示工具提示，如果提交按钮类型，我想隐藏工具提示。在我的代码片段中，.tooltip('hide') 方法不起作用，我不知道为什么。

jsfiddle

html

    <div class=" user-attributes">
<input type="text" name="attrName" />

    <button type="submit" data-toggle="tooltip" title="Please select attribute name" class="btn btn-default disabled" name="addAttribute" >Add attribute</button>

    </div>

javascript

    $('button[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
});
/* allow bootstrap tooltip for disabled buttons */
$('.user-attributes button[type="submit"]').css('pointer-events', 'auto');  

$( ".user-attributes [name='attrName']" ).bind('input', function(){
    var inputIsEmpty = $(this).val().length < 1;
    if (inputIsEmpty){
        $('.user-attributes button[type="submit"]').addClass('disabled');
        $('.user-attributes button[type="submit"]').removeAttr('type');
        $('.user-attributes button[type="submit"]').css('pointer-events', 'auto');
        $('button[data-toggle="tooltip"]').tooltip('show');
    } else {
        $('.user-attributes button[type="submit"]').removeClass('disabled');
        $('.user-attributes button[type="submit"]').removeAttr('style');
        $('.user-attributes button[type="submit"]').attr('type', 'submit');
        $('button[data-toggle="tooltip"]').tooltip('hide');
    }

});

Answer 1

.tooltip('destroy'); 帮助。

jsfiddle