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

Question

以下代码同时展示了Bootstrap工具提示和本地的title属性工具提示：

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 5图标的原生title属性，只显示Bootstrap-tooltip？

- SpazzMarticus

---

删除 title="This is my tooltip." 就完成了。怎么了？ - WebDevBooster

Answer 1

您可以尝试以下HTML：

您可以尝试以下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"。

这是一个可用的 fiddle。 https://jsfiddle.net/samuelj90/qfcs9azv/18/

- SAMUEL

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

的英译中文为：

{{link1：Fiddle}}

。

- jrod336

Answer 3

您可以通过title属性实现，因此不要直接使用data-title或data-original-title属性，因为如果我们针对SEO友好的页面，则需要编写良好的标题文本。因此，这不是Bootstrap4工具提示问题的主要原因是，当通过fontawesome脚本创建svg标记时，它将title="hello"属性包装到<title>hello<title>标记中。
因此，我们可以通过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>

- Raeesh Alam