×
Bootstrap4 教程Bootstrap4 安装使用Bootstrap4 网格系统Bootstrap4 文字排版Bootstrap4 颜色Bootstrap4 表格Bootstrap4 图像形状Bootstrap4 JumbotronBootstrap4 信息提示框Bootstrap4 按钮Bootstrap4 按钮组Bootstrap4 徽章(Badges)Bootstrap4 进度条Bootstrap4 分页Bootstrap4 列表组Bootstrap4 卡片Bootstrap4 下拉菜单Bootstrap4 折叠Bootstrap4 导航Bootstrap4 导航栏Bootstrap4 表单Bootstrap4 表单控件Bootstrap4 轮播Bootstrap4 模态框Bootstrap4 提示框Bootstrap4 弹出框Bootstrap4 滚动监听Bootstrap4 小工具

Bootstrap4 提示框


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


如何创建提示框

通过向元素添加 data-toggle="tooltip" 来来创建提示框。

title 属性的内容为提示框显示的内容:

<a href="#" data-toggle="tooltip" title="我是提示内容!">鼠标移动到我这</a>

注意: 提示框要写在 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>

尝试一下 »

分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)