Bootstrap 提示框

最新推荐文章于 2024-08-01 15:38:50 发布

guo-snowstorm

最新推荐文章于 2024-08-01 15:38:50 发布

阅读量1.5k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap tooltip 鼠标

本文链接：https://blog.csdn.net/u010874036/article/details/50917141

版权

Bootstrap 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

一般是鼠标移动到特定的元素上时，显示相关的提示语，当然可以改为单击时等其他交互操作。在使用之前，一定要单独使用JavaScript语句激活提示框：

$(‘[data-toggle=tooltip]’).tooltip();

示例代码：

<div style="position:absolute ; top:100px;left: 200px;">
	<button data-original-title="Tooltip on left" class="btn btn-default" data-toggle="tooltip" data-placement="left">左侧Tooltip</button>
	<button data-original-title="Tooltip on top" class="btn btn-default" data-toggle="tooltip" data-placement="top">上方Tooltip</button>
	<button data-original-title="Tooltip on bottom" class="btn btn-default" data-toggle="tooltip" data-placement="bottom">底部Tooltip</button>
	<button data-original-title="Tooltip on right" class="btn btn-default" data-toggle="tooltip" data-placement="right">右侧Tooltip</button>
</div>

效果：

提示框组件的声明式属性：

JavaScript用法：

// 通用方式，options可以定义其他属性
$(‘#element’).tooltip(options);
// 例子：指定提示语内容和显示位置
$(‘#element’).tooltip({
title: ”提示语内容”,
placement: ‘top’
});

$(‘#element’).tooltip(‘show’); // 显示提示语
$(‘#element’).tooltip(‘hide’); // 关闭提示语
$(‘#element’).tooltip(‘toggle’); // 反转提示语
$(‘#element’).tooltip(‘destroy’); // 隐藏并销毁提示语

事件：