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 <a href="#" id="text" data-toggle="tooltip" title="这是一段显示的文字" data-placement="right" data-trigger="hover">右边显示内容</a> 2 <script> 3 $(function(){ 4 $(\'[data-toggle="tooltip"]\').tooltip(); // 也可以使用 $(\'#text\').tooltip(); 来启用弹窗 5 }); 6 </script>
支持HTML格式的提示框示例:
1 <a href="#" id="text" data-toggle="tooltip" title="<h1>bootStrap4学习之路</h1><p>漫漫长路,吾将上下求索之!</p>" data-html="true" data-placement="bottom" data-trigger="hover">显示HTML样式提示窗</a> 2 3 <script> 4 $(function(){ 5 $(\'[data-toggle="tooltip"]\').tooltip(); // 也可以使用 (\'#text\').tooltip(); 来启用提示框 6 }); 7 </script>
方法
还可以通过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] // 默认值:\'<div class="tooltip" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>
// 缺省下tooltip样式是黑底白字,可以通过这个属性自定义样式。 21 });
使含有rel="tooltip"的链接变成tooltip组件:
1 <a href="#" rel="tooltip" title="这是一段提示文本">移上去</a> 2 <script> 3 $(function(){ 4 $(\'a[rel="tooltip"]\').tooltip({ 5 trigger: \'hover\', 6 delay: 300, 7 placement: \'bottom\' 8 }); 9 }); 10 </script>
selector 选择器,设置某一对象下指定的元素为tooltip组件,演示代码:
1 <div class="demo" data-trigger="hover"> 2 <a href="#" rel="tooltip" title="1111111111">移上去</a> 3 <a href="#" rel="tooltip" title="2222222222">这里移上去也会显示</a> 4 </div> 5 <a href="#" rel="tooltip" title="0000000">这里移上去不会显示</a> 6 <script> 7 $(function(){ 8 $(\'.demo\').tooltip({ 9 selector: \'a[rel="tooltip"]\' 10 }); 11 }); 12 </script>
注意:上例中data-trigger设置在了demo元素上面,如果设置在a标签上是无效的!
使用template,更改tooltip样式,演示代码:
1 <style> 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 </style> 34 35 <a href="#" id="hoverIt" rel="tooltip" title="这里样式改变了">移上2222去</a> 36 <script> 37 $(function(){ 38 $(\'#hoverIt\').tooltip({ 39 trigger: \'hover\', 40 template: \'<div class="tooltip" role="tooltip"><div class="arrow define-tooltip-arrow"></div><div class="tooltip-inner define-tooltip-inner"></div></div>\' 41 }); 42 });
注意:template 值中define-tooltip-arrow、define-tooltip-inner这二个样式可以根据需要进行更改(其它部份不能更改),更改时要同步更改style内的样式。
在一些特殊情况下,需要调用程序触发tooltip时,bootstrap4也提供了一些接口: $obj.tooltip(\'show | hide | trigger | destroy\'),
1) 调用显示提示框: $obj.tooltip(\'show\'), 示例:
1 <a href="#" data-toggle="tooltip" title="自动弹出">自动弹出</a> 2 <script> 3 $(function(){ 4 $(\'a[data-toggle="tooltip"]\').tooltip(\'show\'); 5 }); 6 </script>
注意:不要试图在隐藏元素上显示提示框!
2) 调用关闭提示框:$obj.tooltip(\'hide\'),示例:
1 <a href="#" id="autoIt" data-toggle="tooltip" title="它会自动弹出,也会自动关闭">自动弹出,5秒后自动关闭</a> 2 <script> 3 $(function(){ 4 $(\'#autoIt\').tooltip(\'show\'); 5 setTimeout(function(){ 6 $(\'#autoIt\').tooltip(\'hide\'); 7 }, 5000); 8 }); 9 </script>
3) 如果当前提示框是显示的就让它关闭。否则让它显示:$obj.tooltip(\'trigger\'),示例:
1 <!-- manual 开启手动触发模式 --> 2 <a href="#" id="tooltip" data-toggle="tooltip" data-trigger="manual" title="弹出关闭切换">手动触发模式</a> 3 <button id="trigger-btn">弹出</button> 4 <script> 5 $(function(){ 6 $(\'#trigger-btn\').click(function(){ 7 $(this).text()==\'弹出\' ? 8 $(this).text(\'关闭\') : 9 $(this).text(\'弹出\'); 10 $(\'#tooltip\').tooltip(\'toggle\'); 11 }); 12 }); 13 </script>
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 () { |