【详解】tooltip组件的使用 - bootStrap4常用CSS笔记

佚名 6年前 (2019-05-15) 随笔 1161人围观抢沙发百度已收录

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

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

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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}	bootStrap4中应该取消了这个属性，测试时没有被挤变形情况默认值false，这是一个非常重要的设置。这句话意思就是让提示框的显示区域可以为整个区域，而不是当前的盒子，这样就不会挤到变形，具体说明下面说介绍
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,在bootStrap4中好像没有作用 17     
18  selector: [string | false], // 选择器，设置某一对象下指定的元素为tooltip组件 19     
20     template: [string] // 默认值：'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>
                          //  缺省下tooltip样式是黑底白字，可以通过这个属性自定义样式。
21 });