I am dynamically creating a div using jquery which contains add & close button. I am using Bootstrap tooltip for the add & close buttons. The problem that I am facing is Tooltip of the first add button doesn't gets hidden even when the mouse is hovering other add button. The tooltip of first add button remains as it is.(Refer screenshot) Any idea as to how to make it hidden.

I am using jquery clone method to create the dynamic divs.

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

Also for hiding the tooltips, I am using the below code but still the first tooltip is not getting hidden.

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

updated 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 to JS Fiddle: /

As you can see in JS Fiddle, the tooltip isn't getting closed.

I am dynamically creating a div using jquery which contains add & close button. I am using Bootstrap tooltip for the add & close buttons. The problem that I am facing is Tooltip of the first add button doesn't gets hidden even when the mouse is hovering other add button. The tooltip of first add button remains as it is.(Refer screenshot) Any idea as to how to make it hidden.

I am using jquery clone method to create the dynamic divs.

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

Also for hiding the tooltips, I am using the below code but still the first tooltip is not getting hidden.

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

updated 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 to JS Fiddle: https://jsfiddle/gLkrsbxc/4/

As you can see in JS Fiddle, the tooltip isn't getting closed.

• javascript
• jquery
• html
• css
• twitter-bootstrap

• 2 please provide the HTML too look as well! It would be better if you could just create a fiddle and add in your question! – arximughal Commented Dec 19, 2016 at 12:37

1 Answer 1

Please check the last update for solution

As mentioned in the docs at http://getbootstrap./javascript/#tooltips, you need to initialize all the tooltips e.g.

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

So, here you just need to initialize the tooltips after adding them to the DOM. Just add $('[data-toggle="tooltip"]').tooltip() in your click function after cloning.

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

And I think if initialized properly, you won't need the hide function.

Update:

I think calling the initializing function doesn't work properly because it is a problem when dom manipulation operations are performed. Add slight delay after the append function and before the initializing function with setTimeout like this:

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

Just hide the tooltip of the button you just clicked before cloning:

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

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

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