Bootstrap的工具提示（Tooltip）

妖狐艹你老母 2022-07-16 23:22 192阅读 0赞

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

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

然后在JS中加入：

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

![这里写图片描述][20160906155928452]

当中的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 () {
      // 执行一些动作...
    })

[20160906155928452]: /images/20220717/a5c493a0abda47d1b268772a921932a3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap Tooltip 弹出图片提示信息

html中引入bootstrap的css和js，然后在需要提示的标签上，加上： data-toggle="tooltip" data-placement="bottom...

骑猪看日落/ 2024年04月17日 18:52/ 0 赞/ 72 阅读

相关 jQuery UI 实例 - 工具提示框（Tooltip）

可自定义的、可主题化的工具提示框，替代原生的工具提示框。如需了解更多有关 tooltip 部件的细节，请查看 API 文档 [工具提示框部件（Tooltip Widget）

待我称王封你为后i/ 2024年03月24日 17:57/ 0 赞/ 67 阅读

相关 css基础 CSS 提示工具(Tooltip)

阅读目录 CSS 提示工具(Tooltip) 基础提示框(Tooltip) 实例解析定位提示工具添加

傷城~/ 2023年10月06日 22:33/ 0 赞/ 55 阅读

相关 echarts.tooltip提示框示例

最近项目用到了echarts,做一下简单总结，主要是提示框tooltip中的formatter用法： ![在这里插入图片描述][watermark_type_ZmFuZ3p

亦凉/ 2022年10月26日 01:25/ 0 赞/ 314 阅读

相关 CSS提示工具-Tooltip-案例

![20210706164014325.gif][] 基础[使用][Link 1] <style> .tooltip { positio

快来打我*/ 2022年10月13日 05:24/ 0 赞/ 161 阅读

相关 bootstrap提示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

青旅半醒/ 2022年10月02日 10:42/ 0 赞/ 152 阅读

相关 Bootstrap的工具提示（Tooltip）

在html中引入bootstrap的css和js，然后在需要提示的标签上加上： data-toggle="tooltip" data-placement="botto

妖狐艹你老母/ 2022年07月16日 23:22/ 0 赞/ 193 阅读

相关 CSS 提示工具(Tooltip)

基础提示框(Tooltip) ![SouthEast][] ![SouthEast 1][] 实例解析 HTML) 使用容器元素 (lik

ゞ浴缸里的玫瑰/ 2021年09月15日 06:28/ 0 赞/ 363 阅读

相关响应式前端框架Bootstrap系列（18）提示工具（Tooltip）插件

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插

浅浅的花香味﹌/ 2021年09月14日 14:22/ 0 赞/ 421 阅读

相关在bootstrap table中使用Tooltip

//偏好主题 function preferenceFormatter(value, row, index) { var nameStri

Love The Way You Lie/ 2021年09月12日 04:50/ 0 赞/ 787 阅读