如何仅针对动态生成的特定悬停 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>

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

How to show tooltip only for a particular hovering div which are dynamically generated

html

jquery

tooltip