【详解】提⽰框（tooltip）的使⽤-bootStrap4常⽤CSS笔记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 $ltip({
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
20template: [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四个不同⽅向箭头样式 */
10 top: 0;
11 border-width: 0.4rem 0.4rem 0;
12 border-top-color: #ccc;
13 }
14
16 right: 0;
17 border-width: 0.4rem 0.4rem 0.4rem 0;
18 border-right-color: #ccc;
19 }
autoit20
22 left: 0;
23 border-width: 0.4rem 0 0.4rem 0.4rem;
24 border-left-color: #ccc;
25 }
26
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也提供了⼀些接⼝： $ltip('show | hide | trigger | destroy'),
1) 调⽤显⽰提⽰框： $ltip('show'), ⽰例：
1<a href="#" data-toggle="tooltip" title="⾃动弹出">⾃动弹出</a>
2<script>
3 $(function(){
4 $('a[data-toggle="tooltip"]').tooltip('show');
5 });
6</script>
注意：不要试图在隐藏元素上显⽰提⽰框！
2) 调⽤关闭提⽰框：$ltip('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) 如果当前提⽰框是显⽰的就让它关闭。否则让它显⽰：$ltip('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组件, $ltip('destroy'); 【好像bootstrap4中，已不存在接⼝】
事件
tooltip含有四种事件，执⾏顺序如下：
ltip $('ltip', function () { // 显⽰时执⾏
})
ltip $('ltip', function () { // 数据内容插⼊完成时执⾏
})
ltip $('ltip', function () { // 完全显⽰后执⾏
})
ltip $('ltip', function () { // 隐藏时执⾏
})
ltip $('ltip', function () { // 完全隐藏后执⾏
})
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论