Bootstrap 提示工具(Tooltip)插件.pdfVIP

Bootstrap 提⽰⼯具 （Tooltip ）插件 Bootstrap 提⽰⼯具 （Tooltip ）插件 当您想要描述⼀个链接的时候，提⽰⼯具 （Tooltip ）就显得⾮常有⽤。提⽰⼯具 （Tooltip ）插件是 Jason Frame 写的 j Query .tip sy 的启发。提⽰⼯具 （Tooltip ）插件 做了很多改进，例如不需要依赖图像，⽽是改⽤ CSS 实现动画效果，⽤ data 属性存 储标题信息。 如果您想要单独引⽤该插件的功能，那么您需要引⽤ tooltip.j s 。或 者，正如 Bootstrap 插件概览 ⼀章中所提到，您可以引⽤ bootstrap .j s 或 压缩版的 bootstrap .min .j s 。 ⽤法 提⽰⼯具 （Tooltip ）插件根据需求⽣成内容和标记，默认情况下是把提⽰⼯具 （tooltip ）放在它们的触发元素后⾯。您可以有以下两种⽅式添加提⽰⼯具 （tooltip ）： 通过 data 属性：如需添加⼀个提⽰⼯具 （tooltip ），只需向⼀个锚标签添加 data-toggle= tooltip 即可。锚的 title 即为提⽰⼯具 （tooltip ）的⽂本。默认情 况下，插件把提⽰⼯具 （tooltip ）设置在顶部。 a href=# data-toggle=tooltip title=Example tooltip请悬 通过 JavaScript ：通过 JavaScript 触发提⽰⼯具 （tooltip ）： $(#identifier).tooltip(options) 提⽰⼯具 （Tooltip ）插件不像之前所讨论的下拉菜单及其他插件那 样，它不是纯 CSS 插件。如需使⽤该插件，您必须使⽤ jquery 激活它 （读取 j avascript ）。使⽤下⾯的脚本来启⽤页⾯中的所有的提⽰⼯具 （tooltip ）： $(fun tion () { $([data-toggle=tooltip]).tooltip(); }); 实例 下⾯的实例演⽰了通过 data 属性使⽤提⽰⼯具 （Tooltip ）插件的⽤法。 !DOCTYPE htmlhtmlhead titleBootstrap 实例 - 提示⼯具 （Tooltip）插件/title link href=/bootstrap/ ss/bootstrap.min. ss rel=stylesheet s ript sr =/s ripts/jquery .min.js/s ript s ript sr =/bootstrap/js/bootstrap.min.js/s ript/headb title=默认的 Tooltip 默认的 Tooltip/a. 这是⼀个 a href=# lass=tooltip-test data-toggle=tooltip data-pla ement=left title=左侧的 Tooltip 左侧的 Tooltip/a. 这是⼀个 a href=# data-toggle=tooltip data-pla ement=top title=顶部的 Tooltip 顶部的 Tooltip/a. 这是⼀个 a href=# data-toggle=tooltip data-pla ement=bottom title=底部的 Tooltip 底部的 Tooltip/a. 这是⼀个 a href=# data-toggle=tooltip data-pla ement=right title=右侧的 Tooltip 右侧的 Tooltip/abrh4提示⼯具 （Tooltip）插件 - 钮/h4button title=默认的 Tooltip 默认的 Tooltip/buttonbutton type=button lass=btn btn-defa data-pla ement=left title=左侧的 Tooltip 左侧的 Tooltip/buttonbutton type=button lass=btn btn-defa data-pla ement=top title=顶部的 To