Bootstrap学习js插件篇之提示框

2024-04-27 14:18:06

字体：大中小

来源：转载

供稿：网友

Bootstrap学习js插件篇之提示框

案例

受到Jason Frame开发的jQuery.tipsy插件的启发，我们才把这个工具提示插件做的更好，而且此插件不依赖图片，只是使用CSS3来实现动画效果，并使用data属性存储标题。

将鼠标悬停到下面的链接上就可以看到工具提示了：

代码段：

[javascript]view plaincopy

<scripttype="text/Javascript">$(function(){$('.tooltip-demo').tooltip({selector:"[data-toggle=tooltip]",container:"body"})$("#testt").tooltip({})$('a').tooltip()})</script>[html]view%20plaincopy

<divclass="bs-exampletooltip-demo">
<pclass="muted"style="margin-bottom:0;">Tightpantsnextlevelkeffiyeh
<ahref="#"data-toggle="tooltip"title="Defaulttooltip">youPRobably</a>
haven'theardofthem.Photoboothbeardrawdenimletterpressveganmessengerbagstumptown.
Farm-to-tableseitan,mcsweeney'sfixiesustainablequinoa8-bitamericanapparel
<ahref="#"data-toggle="tooltip"title="Anothertooltip">havea</a>
terryrichardsonvinylchambray.Beardstumptown,cardigansbanhmilomothundercats.
Tofubiodieselwilliamsburgmarfa,fourlokomcsweeney'scleanseveganchambray.Areallyironicartisan
<ahref="#"data-toggle="tooltip"title="Anotheroneheretoo">whateverkeytar</a>
,scenesterfarm-to-tablebanksyAustin
<ahref="#"data-toggle="tooltip"title="Thelasttip!">twitterhandle</a>
freegancredrawdenimsingle-origincoffeeviral.
</p>
</div>

预览：

图片无法上传了。。。。。。。。我去去去去去去去。。。。。！！