[英]How to disable native browser tooltip with bootstrap4 tooltip
The following code shows both the bootstrap tooltip and the native title-attribute tooltip:以下代码显示了引导程序工具提示和本机标题属性工具提示:
This is my text.
<i class="far fa-question-circle" data-toggle="tooltip" title="This is my tooltip."></i>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
How can I not show the native title-attribute of Fontawesome 5's icon-svg, so only the Bootstrap-tooltip is shown?我怎样才能不显示 Fontawesome 5 的 icon-svg 的原生标题属性,所以只显示 Bootstrap-tooltip?
You can try following HTML您可以尝试以下 HTML
This is my text. <i class="far fa-question-circle" data-toggle="tooltip" data-title="This is my tooltip."></i>
Since the default nature of browser is difficult to override and may cause unexpected behavior we can choose alternative way to solve the issue由于浏览器的默认特性难以覆盖并可能导致意外行为,我们可以选择替代方法来解决问题
The Bootstrap 4 tool-tip can also show tool tip if the attribute is prefixed with data
.如果属性以
data
为前缀,Bootstrap 4 工具提示也可以显示工具提示。 so you can replace title
attribute with data-title
所以你可以用
data-title
替换title
属性
Here is a working fiddle这是一个工作小提琴
https://jsfiddle.net/samuelj90/qfcs9azv/18/ https://jsfiddle.net/samuelj90/qfcs9azv/18/
I had issues with the data-title
from the answers above, instead I had to use the data-original-title
.我在上面的答案中遇到了
data-title
的问题,而我不得不使用data-original-title
。 You can set this property using the attr
function from jQuery or directly into the DOM.您可以使用 jQuery 中的
attr
函数或直接在 DOM 中设置此属性。
HTML: HTML:
This is my text.
<i class="far fa-question-circle" data-toggle="tooltip"></i>
JavaScript: 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.");
})
You can achieve by title
attribute so don't use directly data-title
or data-original-title
attribute because of if we are targeting SEO friendly page then need to write well title text.您可以通过
title
属性来实现,所以不要直接使用data-title
或data-original-title
属性,因为如果我们针对 SEO 友好的页面,则需要编写好标题文本。 So This is not Bootstrap4
tooltip issue so the main reason is that when created svg
tag by fontawesome
script for icon then its wrapping title="hello" attribute
to <title>hello<title> tag
inside svg tag.所以这不是
Bootstrap4
工具提示问题,所以主要原因是当通过fontawesome
脚本为图标创建svg
标签时,它的包装title="hello" attribute
到<title>hello<title> tag
内的 svg 标签。
So we can remove title
tag by show.bs.tooltip
event.所以我们可以通过
show.bs.tooltip
事件删除title
标签。
Doc: https://getbootstrap.com/docs/4.4/components/tooltips/#events文档: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.