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 plaincopy<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>预览:
图片无法上传了。。。。。。。。我去去去去去去去。。。。。!!
四个展示方位左侧Tooltip上方Tooltip下方Tooltip