Bootstrap Tooltip bleibt stecken

Question

Ich erstelle dynamisch ein div mit jquery, die hinzufügen & schließen Sie die Schaltfläche. Ich benutze Bootstrap-Tooltip für die Schaltfläche & schließen schließen. Das Problem, dem ich gegenüberstehe, ist Tooltip der ersten Schaltfläche hinzufügen wird nicht ausgeblendet, auch wenn die Maus andere Schaltfläche zum Hinzufügen schwebt. Der Tooltip der ersten Schaltfläche zum Hinzufügen bleibt so wie er ist. (Siehe Screenshot) Irgendeine Idee, wie man ihn versteckt.

Ich verwende jquery Klonmethode, um die dynamischen divs zu erstellen.

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

auch die Tooltips für das Verstecken, ich bin mit dem folgenden Code, aber immer noch die erste Tooltip nicht versteckt zu werden.

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

aktualisiert HTML-Code

<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> 

Link zu JS Fiddle: https://jsfiddle.net/gLkrsbxc/4/

Wie Sie in JS Fiddle sehen können, ist der Tooltip nicht geschlossen zu werden.

Answer 1

Bitte überprüfen Sie die letzte Aktualisierung für Lösung

Wie bei http://getbootstrap.com/javascript/#tooltips in der Dokumentation erwähnt, müssen Sie alle initialisieren die Tooltips z.B.

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

Also, hier müssen Sie nur die Tooltips initialisieren, nachdem Sie sie zum DOM hinzugefügt haben. Fügen Sie einfach $('[data-toggle="tooltip"]').tooltip() in Ihrer Klickfunktion nach dem Klonen hinzu.

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

Und ich denke, wenn Sie richtig initialisiert, werden Sie die Verbergen-Funktion nicht benötigen.

Update:

Ich denke, die Initialisierungsfunktion Aufruf nicht richtig funktioniert, weil es ein Problem ist, wenn dom Manipulationsoperationen durchgeführt werden. In leichten Verzögerung nach dem Anfügen Funktion und vor der Initialisierungsfunktion mit setTimeout wie folgt aus:

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

Update 2

verstecken Sie einfach den Tooltip der Schaltfläche, die Sie gerade vor dem Klonen geklickt:

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

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

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