如何仅为动态生成的特定悬停div显示工具提示

Question

我有以下div

<div class="col-sm" title="Device Name" id="titleDevice" data-toggle="tooltip" data-placement="bottom"><i class="fab fa-500px"></i> Name</div>

我试图通过指向该元素的id来显示tooltip，如下所示。这很好用。

showTooltip("#titleDevice");
function showTooltip(idOfElement) {
$(idOfElement).hover(function() {
$(idOfElement).tooltip('show');
});
}

我的问题是，在页面中，有时会有许多这样的div是动态生成的。在这种情况下，id的选择将不起作用，因此我尝试了class的选择。

具有如下的某些数量的div的这种场景的示例

<form method="post" id="qaForm">
<div class="card" style="background-color:white; color: white; position: relative; border-color: black; !important ">
<div class="card-body">
<div class="row">
<div class="col-sm" title="Device Name" class="titleDevice" data-toggle="tooltip" data-placement="bottom"><i class="fab fa-500px"></i> Name</div>
<div class="col-sm" title="second" class="second" data-toggle="tooltip" data-placement="bottom"><i class="fab fa-500px"></i> Second</div>
<div class="col-sm" title="third" class="third" data-toggle="tooltip" data-placement="bottom"><i class="fab fa-500px"></i>third</div>
</div>
</div>
</form>

showTooltip(".titleDevice");
function showTooltip(classOfElement) {
$(classOfElement).hover(function() {
$(classOfElement).tooltip('show');
});
}

然后使用相同的JQuery函数。但当我将鼠标悬停在一个div上时，所有其他div也同时显示tooltip。有人知道如何解决这个问题吗？

Answer 1

要仅显示该特定元素的工具提示，请使用this关键字

showTooltip(".titleDevice");
function showTooltip(idOfElement) {
$(idOfElement).hover(function() {
$(this).tooltip('show');  // Use 'this' here
});
}

Answer 2

如果您想要动态生成的div的工具提示，则仅使用

$(document).tooltip();

这将适用于所有div。您不需要包括hover method。您可以预览以下代码：

$(document).tooltip();
//for dynamically add
$(document).on('click', '#add', function(){
$('#div').html('<div class="col-sm" title="Mobile Name"  data-toggle="tooltip" data-placement="bottom"><i class="fab fa-500px"></i> Name</div>');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="col-sm" title="Device Name" id="titleDevice" data-toggle="tooltip" data-placement="bottom"><i class="fab fa-500px"></i> Name</div>
<hr />
<button id="add">Add New</button>
<hr />
<div id="div"></div>