html5 – 用于span标记的Twitter Bootstrap工具提示(不适用于标记)

栏目: Html5 · 发布时间: 7年前

内容简介:翻译自:https://stackoverflow.com/questions/15023565/twitter-bootstrap-tooltip-for-span-tag-not-for-a-tag
我的问题是基于问题 Bootstrap tooltips not working

所以,解决方案是使用:

jQuery的:

$("[rel='tooltip']").tooltip();

HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

这很完美.

我的问题是:如果我想使用<span>该怎么办?标记而不是<a>.

应该是<span rel =“tooltip”title =“一个漂亮的 工具 提示”>将鼠标悬停在我身上</ span> ?

它工作得很好但我看到rel属性用于标签.

那么,什么是正确的解决方案?

您可以通过以下方式撰写:

方法1

<a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a>

然后使用以下代码初始化它:

$('a').tooltip();

另一种方法是使用类或id并逐个初始化它们,如:

方法2

<span class="top" title="A nice tooltip" data-original-title="Tooltip on right">Hover on me</span>      

<a class="top" title=""  href="#" data-original-title="Tooltip on top">Tooltip on top</a>

比使用以下代码初始化它:

$(".top").tooltip({
placement: "top"
});

Jsfiddle Method 1

Jsfiddle Method 2

翻译自:https://stackoverflow.com/questions/15023565/twitter-bootstrap-tooltip-for-span-tag-not-for-a-tag


以上所述就是小编给大家介绍的《html5 – 用于span标记的Twitter Bootstrap工具提示(不适用于标记)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

自媒体写作,从基本功到实战方法

自媒体写作,从基本功到实战方法

余老诗 / 清华大学出版社 / 2018-9-1 / 59.00元

《自媒体写作》是一本系统而通俗易懂的自媒体写作指导书。 全书共分为10章,分别从写作基本功、新媒体认知、新媒体传播规律和自媒体作者阅读写作素养以及如何进阶等方面展开,结合简书、公众号、今日头条等主流自媒体所选例文,讲解写作知识和新媒体特点,内容详实,有理有据,非常适合自媒体写作爱好者自学。 尤其值得一提的是,写作基本功部分从原理、方法和技巧三个层面展开论说,让自媒体写作学习者既能从根本......一起来看看 《自媒体写作,从基本功到实战方法》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具