Bootstrap tooltip doesn't work on dynamically generated elements

Question

Code for generating element dynamically:

var rStatus = $("#statusText").val();
var roleID = $('#' + Globals.divUserRoleID).html().trim();
var nodelen = response.tsuites.length;
$("#TestSuiteSideMenu").empty();

for(var ts=0;ts<nodelen;ts++){
  var testSuiteName = response.tsuites[ts];
  var testNum = response.tnames[testSuiteName].length;
 var tsMenu =   "<li class='treeview' id='suitemenu'>"+
             "<a href='#' ><i class='fa fa-cubes'></i><span value="+testSuiteName+" id=edit-"+testSuiteName+">"+testSuiteName+"</span><i class='fa fa-angle-left pull-right'></i></a>"+"<ul class='treeview-menu' id="+testSuiteName+">"+
    "<li class='suite-options'>"+
                     "<p align='center'>"+
                        "<button type='button' id='btnSuiteRun-"+testSuiteName+"' class='btn test-btns btn-xs runsuite' data-toggle='tooltip' title='Run Suite'><img src='/assets/images/play_win_icon.svg' class='playwin'></button>"+
                        "<button type='button' id='btnSuiteEdit-"+testSuiteName+"' class='btn test-btns btn-xs editsuite' data-toggle='tooltip' title='Rename Suite'><i class='fa fa-pencil'></i></button>"+
                        "<button type='button' id='btnSuiteImport-"+testSuiteName+"' class='btn test-btns btn-xs importTest' name='"+testSuiteName+"' data-toggle='tooltip' title='Import Test' onclick='loadSuites(this.name)'><i class='fa fa-download'></i></button>"+
      //"<button type='button' id='btnSuiteLog-"+testSuiteName+"' class='btn test-btns btn-xs suitelog' data-toggle='tooltip' title='Suite Log'><i class='fa fa-file-text'></i></button>"+
      "<button type='button' id='btnSuiteClone-"+testSuiteName+"' class='btn test-btns btn-xs clonesuite' data-toggle='tooltip' title='Clone Suite'><i class='fa fa-clone'></i></button>"+
                        "<button type='button' id='btnSuiteDelete-"+testSuiteName+"' class='btn test-btns btn-xs deletesuite' data-toggle='tooltip' title='Delete Suite'><i class='fa fa-trash'></i></button>"+
                        "</p>"+"</li>"+"</ul></li>";
}

$("#TestSuiteSideMenu").append(tsMenu);  
$("[data-toggle='tooltip']").tooltip();

Following code is generated dynamically:

<ul class="treeview-menu menu-open" id="htrbg" style="display: block;">
   <li class="suite-options">
      <p align="center">
      <button type="button" id="btnSuiteEdit-htrbg" class="btn test-btns btn-xs editsuite" data-toggle="tooltip" title="Rename Suite"><i class="fa fa-pencil"></i></button>
      <button type="button" id="btnSuiteImport-htrbg" class="btn test-btns btn-xs importTest" name="htrbg" data-toggle="tooltip" title="Import Test" onclick="loadSuites(this.name)"><i class="fa fa-download"></i></button>
      <button type="button" id="btnSuiteClone-htrbg" class="btn test-btns btn-xs clonesuite" data-toggle="tooltip" title="Clone Suite"><i class="fa fa-clone"></i></button>
      <button type="button" id="btnSuiteDelete-htrbg" class="btn test-btns btn-xs deletesuite" data-toggle="tooltip" title="Delete Suite"><i class="fa fa-trash"></i></button>
      </p>
   </li>
</ul>

When I hover on the button, it makes the title attribute of the button as blank and adds an attribute aria-describedby with values as 'ui-id-2'. But I cannot see the tooltip. Can someone please help me? I have also disabled jquery ui tooltips but it still doesn't work.

`$(function () {` runs when the document is "ready", on page load. You did not show how you dynamically create the new elements... But it's at the end of that function you have to instantiate tooltips on them. — Louys Patrice Bessette, Mar 07 '19 at 19:32

score 5 · Accepted Answer · answered Mar 07 '19 at 20:13

You have to instantiate tooltip() on newly appended elements...

But only on them! It's not a really good idea to re-run the init on already tooltiped ones...

So I suggest you use a class like nottooltipped in the append process (particularly if you have many)... which will enable you to lookup these elements and tooltip them.

See below:

$(document).ready(function(){
  $("[data-toggle='tooltip']").tooltip();

  // After 5 seconds... Simulating a dynamic append to add some buttons
  setTimeout(function(){
    $(".suite-options p").append('<button type="button" id="btnSuiteImport-htrbg" class="btn test-btns btn-xs importTest nottooltipped" name="htrbg" data-toggle="tooltip" title="I WAS ADDED !" onclick="loadSuites(this.name)"><i class="fa fa-surprise"></i></button>');
    
    // HERE! lookup the freshly appended elements to tooltip
    $(".nottooltipped").removeClass("nottooltipped").tooltip();
  },5000);
  
  
});

.suite-options{
  list-style:none;
}
.fa-surprise{
  color:red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<ul class="treeview-menu menu-open" id="htrbg" style="display: block;">
  <li class="suite-options">
    <p align="center">
      <button type="button" id="btnSuiteEdit-htrbg" class="btn test-btns btn-xs editsuite" data-toggle="tooltip" title="Rename Suite"><i class="fa fa-pencil-alt"></i></button>
      <button type="button" id="btnSuiteImport-htrbg" class="btn test-btns btn-xs importTest" name="htrbg" data-toggle="tooltip" title="Import Test" onclick="loadSuites(this.name)"><i class="fa fa-download"></i></button>
      <button type="button" id="btnSuiteClone-htrbg" class="btn test-btns btn-xs clonesuite" data-toggle="tooltip" title="Clone Suite"><i class="fa fa-clone"></i></button>
      <button type="button" id="btnSuiteDelete-htrbg" class="btn test-btns btn-xs deletesuite" data-toggle="tooltip" title="Delete Suite"><i class="fa fa-trash"></i></button>
    </p>
  </li>
</ul>

I updated the code as per the above one but it still doesn't work and on hover makes the title as blank and inserts aria-describedby attribute. — Rovin Patwal, Mar 07 '19 at 20:37

score 2 · Answer 2 · answered Mar 07 '19 at 19:45

2

You need to add .tooltip() to the newly created elements, because they have no action bind on hover event. The time you use $("[data-toggle='tooltip']").tooltip();, it is applied to existing [data-toggle='tooltip'] elements, not the future ones.

answered Mar 07 '19 at 19:45

MichalVales

415
4
10

I tried running $("[data-toggle='tooltip']").tooltip(); after the generation of the elements but it still doesn't work and on hover makes the title as blank and inserts aria-describedby attribute. – Rovin Patwal Mar 07 '19 at 19:49
@RovinPatwal Could you, please, edit your initial post and add the part of your code where you generate them? It would help us to help you. :-) – MichalVales Mar 07 '19 at 19:58
I updated the code. Thanks for having a look at the issue. – Rovin Patwal Mar 07 '19 at 20:11

Bootstrap tooltip doesn't work on dynamically generated elements

2 Answers2