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 相关文章推荐
JavaScript继承方式实例
Oct 29 Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
jquery实现图片切换代码
Oct 13 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
react基本安装与测试示例
Apr 27 Javascript
简单了解JavaScript作用域
Jul 31 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实现服务器状态监控的方法
2014/12/09 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
PHP7 弃用功能
2021/03/09 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
python原始套接字编程示例分享
2014/02/21 Python
python的即时标记项目练习笔记
2014/09/18 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
pandas string转dataframe的方法
2018/04/11 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python和php哪个容易学
2020/06/19 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
经典促销广告词大全
2014/03/19 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python