Bootstrap工具提示不适用于动态生成的元素

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

Answer 2

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>