深入浅出：Bootstrap Tooltip的使用

一、Bootstrap tooltips

Bootstrap 提供了浮动层tooltips的插件用于在鼠标悬停或点击某个元素的时候显示提示信息，这个插件依赖于jQuery和popover插件。

以下是一个演示，当鼠标经过下方的按钮时，会显示一个提示信息：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="This is a tooltip">
Hover over me
</button>

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>

data-toggle="tooltip" 声明了这是一个tooltip元素，data-placement="top" 定义了tooltip出现的位置在上方，title 属性定义了tooltip的内容。在Javascript中，使用$('[data-toggle="tooltip"]').tooltip() 调用tooltip函数来向所有包含了data-toggle="tooltip" 属性的元素添加tooltip效果。

二、Bootstrap tooltip 上方居左

默认情况下Bootstrap tooltip会在元素上方居中显示，如果想要在顶部左边对齐，可以添加data-offset="0, -10"属性，其中0定义水平居中，-10是指tip相对于目标元素向上偏移10px，也可以指定一个字符串，如data-offset="50%,-10" 这样水平居中，垂直方向上向上偏移10px。

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-offset="0, -10">
Tooltip on top
</button>

三、Bootstrap tooltip 字体

通过Bootstrap自定义本地样式来更改Bootstrap tooltip的字体，需要在自定义样式表中针对.tooltip-inner元素进行样式设置。

<style>
.tooltip-inner {
  font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>

四、Bootstrap tooltip 动态无效

动态生成的页面元素需要在渲染完成后才能调用tooltip方法，这里提供了两种方法：

1、从 window 对象上获取元素，以便在加载后才运行以下的 JavaScript：

$(window).on('load', function() {
    $('[data-toggle="tooltip"]').tooltip();
});

2、使用 jQuery插件：jQuery_lazyload_tooltips.js

$('img').lazyload({
        event: 'scroll',
        effect: 'fadeIn',
        threshold: 200,
        container: $('#content'),
        data_attribute: 'src',
        skip_invisible: true,
        callback: function() {
          $('[data-toggle="tooltip"]').tooltip();
        }
});

五、Bootstrap tooltip 无效

有时候我们会遇到tooltip无效的情况，可能是由于以下原因造成的：

1、Bootstrap和jQuery没有正确引入，确认js、css文件路径是否正确；

2、手动更改了Bootstrap或jQuery的某些样式；

3、tooltip相关的元素包含了disabled 或 readonly 属性；

4、绑定了tooltip之后，通过JS更改了tooltip相关元素的内容，但tooltip的内部事件处理机制并不会随之动态更新。

六、Bootstrap tooltip 按钮

使用按钮时，需要注意tabindex="-1"属性，为了防止按钮获得焦点而修改按钮的状态。

<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="Tooltip on top" tabindex="-1">Tooltip on top</button>

七、Bootstrap tooltip 偏移选取

Bootstrap的插件使用data-*属性配置函数选项。

data-animation：定义tooltip的动画效果，值为true或false 默认为true；

data-container：指定将tooltip附加到哪里，值为字符串，如 ‘body’；

data-delay：定义鼠标滑过后多久才显示提示，以毫秒为单位的数值；

data-html：默认值是false，如果设置为true，tooltip的内容可以包含html标记；

data-placement：定义tooltip出现在目标元素的位置，值为 top, bottom, left, right ，默认值是 top；

data-template：定义tooltip的完整 HTML 模板，可以自定义tooltip的样式，必须包含.tooltip-inner和.arrow 两个元素；

data-title：tooltip的文本内容；

data-trigger：指定触发tooltip的事件，默认为hover，可用的值是：click、hover、focus、manual；

data-offset：偏移量，数值或以数据格式，“px, py”作为参数

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" data-offset="10,0" title="Tooltip on right with offset">
Tooltip on right with offset
</button>

以上是Bootstrap tooltip的用法，不难看出，Bootstrap tooltip实现了一种简洁、优雅的方式来为网站添加提示信息。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/189265.html