2023年11月25日发(作者：)
【详解】提⽰框（tooltip）的使⽤-bootStrap4常⽤CSS笔记
tooltip (提⽰框) 是⼀个⼩⼩的弹窗，在⿏标移动到元素上显⽰，⿏标移到元素外就消失。
属性
常⽤的功能，可以通过以下属性来设置：
data-toggle = "tooltip"
title = "这⾥设置展⽰的⽂字"
指明这是⼀个tooltip组件对象，其实可以省略
提⽰框显⽰的内容。
触发提⽰框的⽅式：
1、click 【默认】单击时显⽰或关闭
data-trigger = "{click | hover | focus |
manual}"
2、hover 移上去显⽰，移出去隐藏
3、focus 单击时显⽰，点击空⽩处时隐藏
4、manual ⼿动模式。需要调⽤js代码触发显⽰或关闭提⽰框
data-html = "{false | true}"
data-delay = "{数值}"
data-animation = {true | false}
设置提⽰框内容是否⽀持HTML格式。默认值:false
当值为true时，title属性值可以设置成html代码。不过建议不要这么设置，以防XSS攻击
设置提⽰框延迟显⽰。⽐如 data-delay = "1000" 时，提⽰框会在执⾏后1秒才显⽰。默认值：0
是否动画效果显⽰提⽰框。默认值 ：false不显⽰动画效果。
默认值false，
data-container = {string | false}
当提⽰框⽤于按钮组、表单或表格时，必须指定选项容器：'body'以避免不必要的副作⽤，（例如当触发弹出窗⼝时元素变宽
和/或失去圆⾓）。
data-container = "body"
data-placement = {left | top | right | bottom
设置提⽰框的显⽰位置，⽀持多种设置，⽐如data-placement="auto left"时，提⽰窗尽可能显⽰在左边,在情况不允许的情况
下它才显⽰在右边
| auto}
简单的提⽰框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=" 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-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-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-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-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: ' 41 }); 42 }); 注意：template 值中define-tooltip-arrow、define-tooltip-inner这⼆个样式可以根据需要进⾏更改（其它部份不能更改），更改时要同步更改style内的样式。 在⼀些特殊情况下，需要调⽤程序触发tooltip时，bootstrap4也提供了⼀些接⼝： $obj.('show | hide | trigger | destroy'), tooltip 1) 调⽤显⽰提⽰框： $p('show'), ⽰例： 1 <a href="#" data-toggle="tooltip" title="⾃动弹出">⾃动弹出a> 2 <script> 3 $(function(){ 4 $('a[data-toggle="tooltip"]').tooltip('show'); 5 }); 6 script> 注意：不要试图在隐藏元素上显⽰提⽰框！ 2) 调⽤关闭提⽰框：$p('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) 如果当前提⽰框是显⽰的就让它关闭。否则让它显⽰：$p('trigger')，⽰例： 1 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组件, $p('destroy'); 【好像bootstrap4中，已不存在接⼝】 事件 tooltip含有四种事件，执⾏顺序如下： p p p p p $('p', function () { // 显⽰时执⾏ }) $('p', function () { // 数据内容插⼊完成时执⾏ }) $('p', function () { // 完全显⽰后执⾏ }) $('p', function () { // 隐藏时执⾏ }) $('p', function () { // 完全隐藏后执⾏ })bootStrap4
学习之路漫漫长路，吾将上下求索之！
发布评论