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


Posted in Javascript onDecember 08, 2016

提示工具(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>

效果如下:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js变换显示图片的实例
Apr 16 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
Oct 27 Javascript
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 #Javascript
浅谈Node.js:理解stream
Dec 08 #Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 #Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 #Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 #Javascript
JS生成和下载二维码的代码
Dec 07 #Javascript
You might like
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
Node.js pipe实现源码解析
2017/08/12 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
一文秒懂nodejs中的异步编程
2021/01/28 NodeJs
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
用Python实现职工信息管理系统
2020/12/30 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
机械专业个人求职自荐信格式
2013/09/21 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
合作意向书范本
2014/03/31 职场文书
学校三节实施方案
2014/06/09 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
旷课检讨书500字
2014/10/14 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
初中历史教学反思
2016/02/19 职场文书