【详解】提示框（tooltip）的使用

您所在的位置：网站首页 › js弹出提示框样式怎么设置 › 【详解】提示框（tooltip）的使用

【详解】提示框（tooltip）的使用

2024-03-20 23:28| 来源: 网络整理| 查看: 265

tooltip (提示框) 是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

属性

常用的功能，可以通过以下属性来设置：

data-toggle = "tooltip" 指明这是一个tooltip组件对象，其实可以省略 title = "这里设置展示的文字" 提示框显示的内容。 data-trigger = "{click | hover | focus | manual}"

触发提示框的方式：

1、click 【默认】单击时显示或关闭

2、hover 移上去显示，移出去隐藏

3、focus 单击时显示，点击空白处时隐藏

4、manual 手动模式。需要调用js代码触发显示或关闭提示框

data-html = "{false | true}"

设置提示框内容是否支持HTML格式。默认值:false

当值为true时，title属性值可以设置成html代码。不过建议不要这么设置，以防XSS攻击

data-delay = "{数值}" 设置提示框延迟显示。比如 data-delay = "1000" 时，提示框会在执行后1秒才显示。默认值：0 data-animation = {true | false} 是否动画效果显示提示框。默认值：false不显示动画效果。 data-container = {string | false}

默认值false，

当提示框用于按钮组、表单或表格时，必须指定选项容器：'body'以避免不必要的副作用，（例如当触发弹出窗口时元素变宽和/或失去圆角）。

data-container = "body"

data-placement = {left | top | right | bottom | auto} 设置提示框的显示位置，支持多种设置，比如data-placement="auto left"时，提示窗尽可能显示在左边,在情况不允许的情况下它才显示在右边

简单的提示框HTML代码示例：

1 右边显示内容 2 3 $(function(){ 4 $('[data-toggle="tooltip"]').tooltip(); // 也可以使用 $('#text').tooltip(); 来启用弹窗 5 }); 6

支持HTML格式的提示框示例：

1 显示HTML样式提示窗 2 3 4 $(function(){ 5 $('[data-toggle="tooltip"]').tooltip(); // 也可以使用 ('#text').tooltip(); 来启用提示框 6 }); 7

方法

还可以通过tooltip的option设置来实现更多功能，tooltip函数原型：

1 $obj.tooltip({ 2 title: '', // 提示框显示的文本内容。如果同时设置了属性的title，则优先属性title设置 3 placement: '[left | top | right | bottom]', // 等同于data-placement，级别优先于data-placement设置 4 html: [true | false], // 等同于data-html，级别优先于data-html设置 5 animation: [true | false], // 等同于data-animation，级别优先于data-animation设置 6 7 delay: [数值], // 等同于data-delay，级别优先于data-delay设置 8 // 也可以设置显示延迟或隐藏延迟，如下： 9 delay: { 10 show: [数值], // 显示延迟 11 hide: [数值] // 隐藏延迟 12 }, 13 14 trigger: '[click | hover | focus | manual]', // 等同于data-trigger，级别优先于data-trigger设置 15 16 container: [string | false], // 等同于data-container, 17 18 selector: [string | false], // 选择器，设置某一对象下指定的元素为tooltip组件 19 20 template: [string] // 默认值：' // 缺省下tooltip样式是黑底白字，可以通过这个属性自定义样式。 21 });

使含有rel="tooltip"的链接变成tooltip组件：

1 移上去 2 3 $(function(){ 4 $('a[rel="tooltip"]').tooltip({ 5 trigger: 'hover', 6 delay: 300, 7 placement: 'bottom' 8 }); 9 }); 10

selector 选择器，设置某一对象下指定的元素为tooltip组件，演示代码：

1 2 移上去;; 3 这里移上去也会显示 4 5 这里移上去不会显示 6 7 $(function(){ 8 $('.demo').tooltip({ 9 selector: 'a[rel="tooltip"]' 10 }); 11 }); 12 注意：上例中data-trigger设置在了demo元素上面，如果设置在a标签上是无效的！

使用template，更改tooltip样式，演示代码：

1 2 /* 自定义tooltip的背景色及字体颜色 */ 3 .define-tooltip-inner{ 4 background:#ccc; 5 color: #000 6 } 7 8 /* 自定义tooltip四个不同方向箭头样式 */ 9 .tooltip.bs-tooltip-top .define-tooltip-arrow::before { 10 top: 0; 11 border-width: 0.4rem 0.4rem 0; 12 border-top-color: #ccc; 13 } 14 15 .tooltip.bs-tooltip-right .define-tooltip-arrow::before { 16 right: 0; 17 border-width: 0.4rem 0.4rem 0.4rem 0; 18 border-right-color: #ccc; 19 } 20 21 .tooltip.bs-tooltip-left .define-tooltip-arrow::before { 22 left: 0; 23 border-width: 0.4rem 0 0.4rem 0.4rem; 24 border-left-color: #ccc; 25 } 26 27 .tooltip.bs-tooltip-bottom .define-tooltip-arrow::before { 28 bottom: 0; 29 border-width: 0 0.4rem 0.4rem; 30 border-bottom-color: #ccc; 31 } 32 33 34 35 移上2222去 36 37 $(function(){ 38 $('#hoverIt').tooltip({ 39 trigger: 'hover', 40 template: '' 41 }); 42 });

注意：template 值中define-tooltip-arrow、define-tooltip-inner这二个样式可以根据需要进行更改（其它部份不能更改），更改时要同步更改style内的样式。

在一些特殊情况下，需要调用程序触发tooltip时，bootstrap4也提供了一些接口： $obj.tooltip('show | hide | trigger | destroy'),

1) 调用显示提示框： $obj.tooltip('show'), 示例：

1 自动弹出 2 3 $(function(){ 4 $('a[data-toggle="tooltip"]').tooltip('show'); 5 }); 6

注意：不要试图在隐藏元素上显示提示框！

2) 调用关闭提示框：$obj.tooltip('hide')，示例：

1 自动弹出，5秒后自动关闭 2 3 $(function(){ 4 $('#autoIt').tooltip('show'); 5 setTimeout(function(){ 6 $('#autoIt').tooltip('hide'); 7 }, 5000); 8 }); 9

3) 如果当前提示框是显示的就让它关闭。否则让它显示：$obj.tooltip('trigger')，示例：

1 2 手动触发模式 3 弹出 4 5 $(function(){ 6 $('#trigger-btn').click(function(){ 7 $(this).text()=='弹出' ? 8 $(this).text('关闭') : 9 $(this).text('弹出'); 10 $('#tooltip').tooltip('toggle'); 11 }); 12 }); 13

4) 销除tooltip组件, $obj.tooltip('destroy'); 【好像bootstrap4中，已不存在接口】

事件

tooltip含有四种事件，执行顺序如下：

show.bs.tooltip

$obj.on('show.bs.tooltip', function () { // 显示时执行})

inserted.bs.tooltip

$obj.on('inserted.bs.tooltip', function () { // 数据内容插入完成时执行})

shown.bs.tooltip

$obj.on('shown.bs.tooltip', function () { // 完全显示后执行})

hide.bs.tooltip

$obj.on('hide.bs.tooltip', function () { // 隐藏时执行})

hidden.bs.tooltip

$obj.on('hidden.bs.tooltip', function () { // 完全隐藏后执行})

【本文地址】

【详解】提示框（tooltip）的使用

【详解】提示框（tooltip）的使用

今日新闻

推荐新闻