Bootstrap 工具提示仍然卡住

Question

我正在使用包含添加和关闭按钮的 jquery 动态创建一个 div。我正在使用 Bootstrap 工具提示添加和关闭按钮。我面临的问题是，即使鼠标悬停在其他添加按钮上，第一个添加按钮的工具提示也不会隐藏。第一个添加按钮的工具提示保持原样。（参考屏幕截图）关于如何隐藏它的任何想法。

我正在使用 jquery clone 方法来创建动态 div。

$(document).on('click', ".addFilesBtn", function(e) {
 e.preventDefault();
 $(".appendClass:first").clone().appendTo".addFiles");
 $('.closeFilesBtn').show();
 $('.closeFilesBtn:first').hide();
});

同样为了隐藏工具提示，我使用了下面的代码，但第一个工具提示仍然没有被隐藏。

$(document).on('mouseleave','[data-toggle="tooltip"]', function(){
      $(this).tooltip('hide');
});

更新的 HTML 代码

<div class="row addFiles">
    <div class="appendClass" style="margin-bottom: 1.5%;">
        <label style="white-space: nowrap;" class="responsive-enter-details col-sm-3 control-label">Select Files</label>
        <div class="col-sm-8 col-md-9">
            <div class="fileinput fileinput-new" data-provides="fileinput">
                <div class="form-control" data-trigger="fileinput">
                    <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">Click to select file</span> <i class="fa fa-upload pull-right"></i>
                </div>
                <input id="inputfile" type="file" style="display: none;">
            </div>
        </div>
        <button class="btn btn-box-tool addFilesBtn" data-toggle="tooltip" title="Click to add more files">
            <i class="fa fa-plus"></i>
        </button>
        <button class="btn btn-box-tool closeFilesBtn" data-toggle="tooltip" title="Click to remove this block">
            <i class="fa fa-times"></i>
        </button>
    </div>
</div>

链接到 JS Fiddle： https : //jsfiddle.net/gLkrsbxc/4/

正如您在 JS Fiddle 中看到的，工具提示没有关闭。

Answer 1

请检查上次更新以获取解决方案

如http://getbootstrap.com/javascript/#tooltips上的文档中所述，您需要初始化所有工具提示，例如

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

所以，在这里你只需要在将工具提示添加到 DOM 后初始化它们。$('[data-toggle="tooltip"]').tooltip()克隆后只需添加您的点击功能。

$(document).on('click', ".addFilesBtn", function(e) {
 e.preventDefault();
 $(".appendClass:first").clone().appendTo".addFiles");

 //initialize tooltips(add this line)
 $('[data-toggle="tooltip"]').tooltip();

 $('.closeFilesBtn').show();
 $('.closeFilesBtn:first').hide();
});

而且我认为如果正确初始化，您将不需要隐藏功能。

更新：

我认为调用初始化函数不能正常工作，因为在执行dom操作操作时会出现问题。在 append 函数之后和初始化函数之前添加一点延迟，setTimeout如下所示：

$(document).on('click', ".addFilesBtn", function(e) {
 e.preventDefault();
 $(".appendClass:first").clone().appendTo".addFiles");

 //initialize tooltips(give some time for dom changes)
 setTimeout(function() {
    $('[data-toggle="tooltip"]').tooltip();
 }, 50);

 $('.closeFilesBtn').show();
 $('.closeFilesBtn:first').hide();
});

更新 2

只需隐藏您在克隆前单击的按钮的工具提示：

$(document).on('click', ".addFilesBtn", function(e) {
    e.preventDefault();

    //hide the tooltip
    $(this).tooltip('hide');

    $(".appendClass:first").clone().appendTo(".addFiles");
    $('.closeFilesBtn').show();
    $('.closeFilesBtn:first').hide();
});