javascript - 如何使用 bootstrap4 工具提示禁用本机浏览器工具提示

Question

以下代码显示了引导工具提示和本机标题属性工具提示：

This is my text. 
<i class="far fa-question-circle" data-toggle="tooltip" title="This is my tooltip."></i> 
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

小提琴

如何不显示 Fontawesome 5 的 icon-svg 的原生标题属性，所以只显示 Bootstrap 工具提示？

Answer 1

您可以尝试以下 HTML

This is my text. <i class="far fa-question-circle" data-toggle="tooltip" data-title="This is my tooltip."></i> 

由于浏览器的默认性质难以覆盖并且可能导致意外行为，我们可以选择其他方法来解决问题

如果属性以 . 为前缀，Bootstrap 4 工具提示也可以显示工具提示data。所以你可以title用data-title

这是一个工作小提琴

https://jsfiddle.net/samuelj90/qfcs9azv/18/

Answer 2

我对data-title上面的答案有疑问，我不得不使用data-original-title. attr您可以使用jQuery 中的函数或直接在 DOM中设置此属性。

HTML：

This is my text. 
<i class="far fa-question-circle" data-toggle="tooltip"></i> 

JavaScript：

$(function () {
    //Initialize the Bootstrap tooltip
    $('[data-toggle="tooltip"]').tooltip();

    //Force the Tooltip title change at run time
    $('.fa-question-circle').attr('data-original-title', "This is my tooltip.");
})

小提琴

Answer 3

您可以通过title属性来实现，所以不要直接使用data-title或data-original-title属性，因为如果我们的目标是 SEO 友好页面，那么需要写好标题文本。所以这不是Bootstrap4工具提示问题，所以主要原因是当通过脚本为图标创建svg标记时，它会包装到内部 svg 标记。 所以我们可以按事件删除标签。 文档：https ://getbootstrap.com/docs/4.4/components/tooltips/#eventsfontawesometitle="hello" attribute<title>hello<title> tag
titleshow.bs.tooltip

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
$(function () {
  $('[data-toggle="tooltip"]').on('show.bs.tooltip', function (e) {
   //Remove title tag from inside created svg tag
   $(this).find('title').remove();
 });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>


<div class="container py-4">
  <div class="row">
    <div class="col-sm-4">
    	This is my text. <i class="far fa-question-circle" data-toggle="tooltip" title="This is my tooltip."></i>
    </div>
  </div>
</div>