Bootstrap 4 提示框 - Bootstrap 4 基础教程

提示框是一个小小的弹窗，一般用于在鼠标移动到元素上显示，鼠标移到元素外就消失

基本的提示框

任何 HTML 元素只要添加了 data-toggle="tooltip" 属性就可以创建一个提示框

提示框的内容为 HTML 元素的 title 属性值

<a href="#" data-toggle="tooltip" title="我只是一个提示框">鼠标移动到我这里显示提示框</a>

提示框需要 JavaScript 脚本支持，我们可以把脚本要写在 jQuery 的初始化代码里，然后在指定的元素上调用 tooltip() 方法

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});

运行范例 »

提示框的位置

默认情况下，提示框显示在元素上方

我们可以使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right

<a href="#" data-toggle="tooltip" data-placement="top" title="我只是一个提示框">鼠标移动到我这里显示提示框</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="我只是一个提示框">鼠标移动到我这里显示提示框</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="我只是一个提示框">鼠标移动到我这里显示提示框</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="我只是一个提示框">鼠标移动到我这里显示提示框</a>

运行范例 »

运行以上范例，演示如下