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 html html head 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 /head body h4⼯具提示 （Tooltip）插件 - 锚/h4 这是⼀个 a href=# lass=tooltip-test data-toggle=tooltip 默认的 Tooltip /a. 这是⼀个 a href=# lass=tooltip-test data-toggle=tooltip 左侧的 Tooltip /a. 这是⼀个 a href=# data-toggle=tooltip data-pla ement=top 顶部的 Tooltip /a. 这是⼀个 a href=# data-toggle=tooltip data-pla ement=bottom 底部的 Tooltip /a. 这是⼀个 a href=# data-toggle=tooltip data-pla ement=right 右侧的 Tooltip /a br h4⼯具提示 （Tooltip）插件 - 钮/h4 button type=button lass=btn btn-default data-toggle=tooltip 默认的 Tooltip /button button type=button lass=btn btn-default data-toggle=tooltip 左侧的 Tooltip /button button type=button lass=btn btn-default data-toggle=toolt