Bootstrap实现提示框和弹出框效果

发布时间：2020-12-18 00:42:51 所属栏目：安全来源：网络整理

导读：首先讲一讲提示框(Tooltip) 的使用方法样式文件： LESS版本：对应源文件 tooltips.less 按钮做的提示框 button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" data-original-title="提示框在顶部" 提示框在顶部 butt

首先讲一讲

提示框(Tooltip)

的使用方法

样式文件：

LESS版本：对应源文件 tooltips.less

按钮做的提示框

<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="提示框在底部">
提示框在底部

<button type="button"
class="btn btn-default"
data-toggle="tooltip"
data-placement="right"
data-original-title="提示框居右">
提示框居右

链接制作的提示框

<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="top"
title="提示框在顶部">
提示框在顶部

<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="bottom"
title="提示框在底部">
提示框在底部

<a class="btn btn-primary"
data-toggle="tooltip"
data-placement="right"
title="提示框在居右">
提示框居右

<a href="##"
class="btn btn-primary"
id="myTooltip">
我是提示框

<a href="##"
class="btn btn-primary"
id="myTooltip2">
我是提示框2

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">

通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。还有一个最重要的参数不可缺少，data-toggle=”tooltip”。

需要特别注意的是：

1、如果同时设置了 data-original-title 和 title 定义提示信息，那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时，才会取 title 的值做为提示信息的内容。

2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。

提示框–其他的自定义属性

提示框–JS设置参数方法

弹出框（Popover）

不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。样式文件： ☑ LESS版本：对应的源文件是 popovers.less

弹出框–弹出框的结构

弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用或者标签来制作，调用popover的时候，options的参数与声明式选择里以data-开头的自定义属性一样。都可以在options里设置。

弹出框–提示框和弹出框的异同

提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click 提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)

提示框tooltip的模板：

弹出框popover的模板：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!