Question

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

我正在使用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操作操作时这是一个问题。在追加函数之后和初始化函数之前添加稍微延迟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();
});

Bootstrap Tooltip仍然卡住

1 个答案: