引導工具提示仍然卡住

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小提琴： https://jsfiddle.net/gLkrsbxc/4/

正如你可以在JS小提琴看到，提示是沒有得到關閉。

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