【详解】提示框（tooltip）的使用 – bootStrap4常用CSS笔记

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>

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>

 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 });

 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>

 1 <div class="demo" data-trigger="hover">
 2   <a href="#" rel="tooltip" title="1111111111">移上去</a>&nbsp;&nbsp;
 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>

 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 });

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

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>

 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>