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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
浅谈react useEffect闭包的坑
Jun 08 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格式数据的方法
2016/03/04 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
jQuery bind事件使用详解
2011/05/05 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
再谈JavaScript异步编程
2016/01/27 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
以一段代码为实例快速入门Python2.7
2015/03/31 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
为什么称python为胶水语言
2020/06/16 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
Oracle的内存结构(Memory structures)
2015/06/10 面试题
生产部经理岗位职责
2013/12/16 职场文书
班组长岗位职责范本
2014/01/05 职场文书
读书活动实施方案
2014/03/10 职场文书
大学生求职信例文
2014/06/29 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
医院病假条范文
2015/08/17 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript