javascript - Bootstrap tooltip doesn't work on dynamically generated elements - Stack Overflow

admin管理员组

文章数量:1402851

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

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.

• javascript
• jquery
• html
• twitter-bootstrap
• tooltip

Share Improve this question Follow edited Mar 8, 2019 at 19:16 Rovin Patwal asked Mar 7, 2019 at 19:26 Rovin PatwalRovin Patwal 11922 silver badges1414 bronze badges 1

• $(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 Commented Mar 7, 2019 at 19:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

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.

本文标签： javascriptBootstrap tooltip doesn39t work on dynamically generated elementsStack Overflow