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.

Answer 1

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>

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