Bootstrap 4工具提示从第二个悬停出现在动态元素上

Question

我有一个动态元素，悬停时需要在该元素上显示Bootstrap工具提示。因此，我使用了如下的Jquery委托。但是问题是工具提示没有出现在第一个悬停上，而是从第二个悬停出现了。您能指出错误吗？

动态元素的HTML

 <td scope="col" id="{{this._id}}" data-toggle="tooltip" data-placement="top" title="CLICK TO VIEW">
      <i class="fas fa-eye"></i>
 </td>

jQuery

$(document).ready(function() {
 $('body').on('mouseenter', '[data-toggle="tooltip"]', function(event) {
    $('[data-toggle="tooltip"]').tooltip();
    event.stopPropagation();
    event.preventDefault();
  });
}

预先感谢

Answer 1

您是否尝试过以下代码：

$(document).ready(function(){
    $('body').tooltip({
        selector: '[data-toggle="tooltip"]'  // tooltip objects will be delegated to the specified targets i.e. '[data-toggle="tooltip"]'
    });
});

在此处详细了解tooltip options。