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 5的icon-svg的原生title-attribute，所以只显示Bootstrap-tooltip？

Answer 1

您可以尝试使用HTML

data

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

如果属性以title为前缀，Bootstrap 4工具提示也可以显示工具提示。因此，您可以使用data-title

替换{{1}}属性

这是更新的小提琴

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工具提示问题，因此主要原因是，当由svg脚本为图标创建fontawesome标签时，其将title="hello" attribute包装到svg中的<title>hello<title> tag标签。
因此，我们可以通过title事件删除show.bs.tooltip标签。

Doc：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工具提示禁用本机浏览器工具提示

3 个答案: