Bootstrap 提示工具(Tooltip)插件
2016-10-22 21:45
465 查看
用法
提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面。您可以有以下两种方式添加提示工具(tooltip):通过 data 属性:如需添加一个提示工具(tooltip),只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具(tooltip)的文本。默认情况下,插件把提示工具(tooltip)设置在顶部。
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>
通过 JavaScript:通过 JavaScript 触发提示工具(tooltip):
$('#identifier').tooltip(options)
提示工具(Tooltip)插件不像之前所讨论的下拉菜单及其他插件那样,它不是纯 CSS 插件。如需使用该插件,您必须使用 jquery 激活它(读取 javascript)。使用下面的脚本来启用页面中的所有的提示工具(tooltip):
$(function () { $("[data-toggle='tooltip']").tooltip(); });
实例
下面的实例演示了通过 data 属性使用提示工具(Tooltip)插件的用法。
实例
<h4>提示工具(Tooltip)插件 - 锚</h4> 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip"> 默认的 Tooltip </a>. 这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip"> 左侧的 Tooltip </a>. 这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip"> 顶部的 Tooltip </a>. 这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip"> 底部的 Tooltip </a>. 这是一个 <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip"> 右侧的 Tooltip </a> <br> <h4>提示工具(Tooltip)插件 - 按钮</h4> <button type="button" class="btn btn-default" data-toggle="tooltip" title="默认的 Tooltip"> 默认的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip"> 左侧的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip"> 顶部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip"> 底部的 Tooltip </button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip"> 右侧的 Tooltip </button> <script> $(function () { $("[data-toggle='tooltip']").tooltip(); }); </script>
结果如下所示:
相关文章推荐
- Bootstrap的js插件之工具提示(tooltip)
- Bootstrap 提示工具(Tooltip)插件方法的用法
- Bootstrap 提示工具(Tooltip)插件
- Bootstrap插件(四)——工具提示(tooltip.js)
- Bootstrap 提示工具(Tooltip)插件的事件
- Bootstrap 工具提示插件Tooltip 的选项
- Bootstrap学习总结笔记(18)-- 基本插件之Tooltip提示工具
- 【bootstrap教程】Bootstrap 工具提示(Tooltip)插件
- Bootstrap 提示工具(Tooltip)插件
- Bootstrap 提示工具(Tooltip)插件
- 响应式前端框架Bootstrap系列(18)提示工具(Tooltip)插件
- Bootstrap 工具提示插件Tooltip的方法
- Bootstrap每天必学之工具提示(Tooltip)插件
- Bootstrap基本插件学习笔记之Tooltip提示工具(18)
- Bootstrap标签页和工具提示插件
- 45.工具提示插件——tooltip
- Bootstrap的工具提示(Tooltip)
- bootstrap中jquery插件——警告框、工具提示框、弹出框、模态框
- jquery 气泡式工具提示(tooltip)插件BeautyTips