Bootstrap基本插件学习笔记之Tooltip提示工具(18)

更新时间：2016年12月08日 09:02:09 作者：kikay

这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之oltip提示工具的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（Tooltip）放在它们的触发元素后面。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>ToolTip提示工具</title>
</head>
<body>
<div class="container">
 <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip">Tooptip</a>
</div>
<script>
 $(function () {
//  启动全部的Tooltip工具
  $('[data-toggle="tooltip"]').tooltip();
 })
</script>
</body>
</html>

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 JQuery 激活它（读取 JavaScript）。使用下面的脚本来启用页面中的所有的提示工具（Tooltip）：

$(function () {
// 启动全部的Tooltip工具
  $('[data-toggle="tooltip"]').tooltip();
})

下面是一个实例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>ToolTip提示工具实例</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>ToolTip提示工具实例</h1>
 </div>
 <div>
  <p>这是一个美丽的<a href="#" data-toggle="tooltip" title="右边的姑娘" data-placement="right">姑娘</a></p>
  <p>这是一个美丽的<button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" title="左边的姑娘"
       data-placement="left">姑娘</button></p>
  <p>这是一个美丽的<button type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" title="上边的姑娘"
       data-placement="top">姑娘</button></p>
  <p>这是一个美丽的<button type="button" class="btn btn-sm btn-success" data-toggle="tooltip" title="下边的姑娘"
       data-placement="bottom">姑娘</button></p>
 </div>
</div>
<script>
 $(function () {
//  启动全部的Tooltip工具
  $('[data-toggle="tooltip"]').tooltip();
 })
</script>
</body>
</html>

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js浏览器本地存储store.js介绍及应用
store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash。store.js 即可实现本地存储功能
2014-05-05
javascript去除字符串左右两端的空格
这篇文章主要介绍了javascript去除字符串左右两端的空格,需要的朋友可以参考下
2015-02-02
JavaScript中正则表达式判断匹配规则及常用方法
JS作为一门常用于web开发的语言，必然要具备正则这种强大的特性，本文将对JS中的正则用法及常用函数进行一番总结
2017-08-08
js parseInt的陷阱分析小结
js parseInt的陷阱分析小结,当第一个字符为0时，Js会把它看成一个8进制数字，其他8进制之外的字符都回被忽略掉。
2011-03-03
js判断节假日实例代码
因为要做一个日历控件，遇到国家法定节假日,怎么实现此功能呢？其实实现代码很简单的。下面小编给大家分享js判断节假日实例代码，需要的朋友参考下吧
2017-12-12
再谈Javascript中的基本类型和引用类型(推荐)
这篇文章主要介绍了Javascript中的基本类型和引用类型的相关资料,包括基本类型和引用类型的概念及区别，数据类型检测给大家详细介绍了js基本类型和引用类型，非常不错，需要的朋友可以参考下
2016-07-07
javascript中的糖衣语法Promise对象详解
这篇文章主要介绍了javascript中的糖衣语法Promise对象详解,Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
详细聊聊浏览器是如何看闭包的
闭包实质上是函数作用域的副产物,下面这篇文章主要给大家介绍了关于浏览器是如何看闭包的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2021-11-11
js判断浏览器是否支持html5
这篇文章主要介绍了如何使用js判断浏览器是否支持html5,需要的朋友可以参考下
2014-08-08
TypeScript 中的 .d.ts 文件详解(加强类型支持提升开发效率)
.d.ts 文件在 TypeScript 开发中扮演着非常重要的角色,它们让我们能够享受到 TypeScript 强大的类型系统带来的优势,提高代码质量和开发效率,接下来,我们将深入探讨如何为 JavaScript 库和自定义模块创建 .d.ts 文件,以及一些最佳实践和注意事项,一起看看吧
2023-09-09