[英]JavaScript to Active Twitter Bootstrap Tooltips
I'm playing around with Twitter Bootstrap's Tooltips , but am having problems since they moved away from Twipsy. 我正在玩Twitter Bootstrap的工具提示 ,但是因为他们离开了Twipsy而遇到了问题。 The correect JavaScript is included in the page.
更正JavaScript包含在页面中。
Let's say I have the following: 假设我有以下内容:
<p><a href="#" rel="tooltip" data-original-title="hello">hover on me</a></p>
What is the exact JavaScript I need to use to make the tooltip appear? 什么是确切的JavaScript我需要使用,使工具提示出现?
Thanks in advance! 提前致谢!
You need to explicitly run .tooltip()
for all elements that have to have tooltip. 您需要为必须具有工具提示的所有元素显式运行
.tooltip()
。 For example, this will work: 例如,这将起作用:
<span rel="tooltip" title="tooltip text">some text</span>
...
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
});
</script>
For your example it will just be: 对于你的例子,它只是:
$('a').tooltip();
but according to the documentation, you should use the title
attribute, not data-original-title
. 但根据文档,您应该使用
title
属性,而不是data-original-title
。 That attribute is added by Bootstrap's tooltip code. 该属性由Bootstrap的工具提示代码添加。 Also there is no need for
rel="tooltip"
. 此外,不需要
rel="tooltip"
。
Your code should be: 你的代码应该是:
HTML: HTML:
<a href="#" title="hello">hover on me</a>
JS: JS:
$("a").tooltip(); // this will trigger a tooltip on all <a> elements
In Bootstrap, We need to manually initialize Tooltips 在Bootstrap中,我们需要手动初始化工具提示
its mentioned in their Documentation also. 它在文档中也提到了。
<script type="text/javascript">
$(function () {
$("[data-toggle='tooltip']").tooltip();
});</script>
you need exactly to 你需要完全
<script src="bootstrap-tooltip.js "></script>
<script>
$(function (){
$('a').tooltip();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.