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

Question

以下代码同时显示 bootstrap 工具提示和本机 title-attribute 工具提示：

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

Fiddle

我怎么能不显示Fontawesome 5icon-svg的原生title-attribute，所以只显示Bootstrap-tooltip？

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 tool-tip 如果属性前缀为 data 也可以显示工具提示。所以你可以用 data-title

替换 title 属性

这是一个有效的 fiddle

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

Answer 2

我对上述答案中的 data-title 有疑问，我不得不使用 data-original-title。您可以使用 jQuery 中的 attr 函数或直接在 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.");
})

Fiddle

Answer 3

您可以通过 title 属性实现，所以不要直接使用 data-title 或 data-original-title 属性，因为如果我们的目标是 SEO 友好页面，则需要写好标题文本。所以这不是 Bootstrap4 工具提示问题，所以主要原因是当 fontawesome 脚本为图标创建 svg 标签时，它在 svg 中包装 title="hello" attribute 到 <title>hello<title> tag标签。
所以我们可以通过 show.bs.tooltip 事件移除 title 标签。

文档：https://getbootstrap.com/docs/4.4/components/tooltips/#events

$(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>

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

How to disable native browser tooltip with bootstrap4 tooltip

javascript

html

bootstrap-4

font-awesome-5