在html中引入bootstrap的css和js,然后在需要提示的标签上加上:

data-toggle="tooltip" data-placement="bottom" title="我是提示语"

然后在JS中加入:

$("[data-toggle='tooltip']").tooltip();

当中的data-placement值有top、left、right、bottom;默认为top;

相关的一些方法:

//向元素集合附加提示工具句柄
$('#element').tooltip(options);
//切换显示/隐藏元素的提示工具
$('#element').tooltip('toggle');
//显示元素的提示工具
$('#element').tooltip('show');
//隐藏元素的提示工具
$('#element').tooltip('hide');
//隐藏并销毁元素的提示工具
$('#element').tooltip('destroy');
//以html的方式显示
$('#element').tooltip({html : true });

相关的一些事件:

//当调用 show 实例方法时立即触发该事件
$('#myTooltip').on('show.bs.tooltip', function () {// 执行一些动作...
})
//当提示工具对用户可见时触发该事件(将等待 CSS 过渡效果完成)
$('#myTooltip').on('shown.bs.tooltip', function () {// 执行一些动作...
})
//当调用 hide 实例方法时立即触发该事件
$('#myTooltip').on('hide.bs.tooltip', function () {// 执行一些动作...
})
//当提示工具对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)
$('#myTooltip').on('hidden.bs.tooltip', function () {// 执行一些动作...
})

Bootstrap的工具提示(Tooltip)相关推荐

  1. qml 分隔工具栏ToolSeparator 工具提示ToolTip 旋转轮Tumbler

    分隔工具栏 ToolSeparator 作用是将工具栏中的一组项目与相邻的项目分开.效果上就是通过用一条线分隔项目,实现视觉上的分隔作用 属性 horizontal : [只读],保存方向是否等于Qt ...

  2. Java 在PDF中添加工具提示|ToolTip

    本文,将介绍如何通过Java后端程序代码在PDF中创建工具提示.添加工具提示后,当鼠标悬停在页面上的元素时,将显示工具提示内容. 导入jar包 本次程序中使用的是Free Spire.PDF for ...

  3. 更改bootstrap工具提示-tooltip

    {# 引导添加客服 #}<div class="tooltip-inner-diybox"><div class='teacher-hover-diy' data ...

  4. 使用bootstrap中的toolTip插件时 最上方提示会被遮挡问题

    Bootstrap 里的 popover 被挡住的解决方案 在Bootstarp 中我们可以使用 popover 插件做一些内容的展示, 代码如下: <a data-toggle="p ...

  5. Bootstrap 工具提示插件Tooltip 的选项

    选项 Bootstrap为工具提示插件提供了 8 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 5‑4: 表 5‑4 tooltip插件的选项 名称 类型 默认值 ...

  6. 【bootstrap教程】Bootstrap 工具提示(Tooltip)插件

    文章转载自 [http://www.php230.com] 链接地址 Bootstrap 工具提示(Tooltip)插件 当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示 ...

  7. Bootstrap 工具提示插件

    工具提示 当鼠标移动到特定元素上时,显示相关的提示信息,比如给出链接说明或缩写词的全称等,是一个非常人性化的功能. HTML本身就支持这样的功能,只需给任何元素添加 title 属性,当鼠标悬停时,浏 ...

  8. Bootstrap 提示工具(Tooltip)弹出框

    第一步: 加载3个框架 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">< ...

  9. 旺财速啃H5框架之Bootstrap(六)

    年后太忙,一直没有更新 好,这篇结束,速啃嘛,就应该拿重点,实用点.继续之前的内容,接着来讲讲网页中常用的布局组件与插件,我喜欢用简单的直接的话或案例来说明,就是针对那些想快速能做出点东西的人而准备的 ...

最新文章

  1. Scala单例对象(伴生对象)
  2. from torchvision import _C解决办法
  3. 团队在Github上协同开发项目流程
  4. 覆盖php配置文件,配置 – 用另一个文件覆盖php-fpm池配置值
  5. linux php项目启动_Linux上实现Node.js项目自启动
  6. Tips:无法在Windows2012 R2+exchange2010中文版上安装SP3 RU8v2
  7. 我发现了25个影响力达20多年的 Windows 0day,微软刚修完11个
  8. [Spring]04_最小化Spring XML配置
  9. 01.ZooKeeper安装和介绍
  10. js打开新窗口并且POST传入参数
  11. 如何在 Chrome 浏览器中安装印象笔记·剪藏插件
  12. 爱普生xp245手动清零_仍在Windows XP上吗? 手动更新或感到烦恼
  13. java wsimport 调用_Java如何基于wsimport调用wcf接口
  14. MATLAB中拟合线性方程(最小二乘法)
  15. 全网首发:12306抢票算法大曝光?(十张图搞定)
  16. 【自研IM系统Talk00】 --- 接口说明
  17. 【心电信号】基于matlab心率检测【含Matlab源码 1993期】
  18. Android几种定时任务实现方式汇总
  19. 关于项目编译工具ninja、make、cmake的区别与优劣
  20. 上海科技大学计算机浙江分数线,2018上海科技大学录取分数线

热门文章

  1. hadoop3 Yarn容量(Capacity Scheduler)调度器和公平(Fair Scheduler)调度器配置
  2. 关于电脑电流滋滋声解决方法
  3. 苏州企业申请高新技术企业重新认定需要注意这四点
  4. 为什么二进制按权展开就是十进制?彻底搞懂原理
  5. yolact模型DCNv2模块编译错误解决方法
  6. HTML5与CSS3初级入门-姜威-专题视频课程
  7. React全家桶之WEB基础应用-姜威-专题视频课程
  8. 算法练习——判断链表是否有环 leetcode.141 python
  9. 前端性能测试工具hiper介绍
  10. 激光雷达相机外参标定