Bootstrap 提示工具（Tooltip）弹出框

第一步：

加载3个框架

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

第二步在body中写

 <a data-toggle="tooltip" data-placement="right" title="Tooltip on right"  >Tooltip on left </a>

第三步也js代码

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

用法

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：

通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle=“tooltip” 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：

$('#identifier').tooltip(options)

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

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

实例1

<h4>提示工具（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"title="默认的 Tooltip">默认的 Tooltip
</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip"data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top"title="顶部的 Tooltip">顶部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom"title="底部的 Tooltip">底部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right"title="右侧的 Tooltip">右侧的 Tooltip
</a><br><h4>提示工具（Tooltip）插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip"title="默认的 Tooltip">默认的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip"data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip
</button>
<script>$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

实例2

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 - 工具提示（Tooltip）插件方法</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show</a>.这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide</a>.这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy</a>.这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle</a>.<br><br><br><br><br><br><p class="tooltip-options" >这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2 </h2>">Tooltip 方法 options</a>.</p><script>$(function () { $('.tooltip-show').tooltip('show');});$(function () { $('.tooltip-hide').tooltip('hide');});$(function () { $('.tooltip-destroy').tooltip('destroy');});$(function () { $('.tooltip-toggle').tooltip('toggle');});$(function () { $(".tooltip-options a").tooltip({html : true });});</script>
</div></body>
</html>

实例3

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"> <title>Bootstrap 实例 - 工具提示（Tooltip）插件事件</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><h4>工具提示（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip
</a>.<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {alert("Alert message on show");
})});
</script></body>
</html>

Bootstrap 提示工具（Tooltip）弹出框相关推荐

bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的话在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
2019最佳弹窗/弹出框设计20例【附教程】
弹窗/弹出框是APP或者网站与用户交互常见的方式之一.不同的网页弹窗和App弹框适用于不用的场景,弹窗的设计直接影响用户体验.不知道如何提高弹出框的用户体验设计? 小编从优质网站精心挑选了20例弹窗/ ...
如何在html上做弹框效果,如何设计优秀的弹出框网页设计？
最近做项目的时候,发现项目上对于弹出框网页设计的使用有点混乱.例如,需要给用户一个操作提示,用弹出框来完成.用户对这个功能不了解,加一个"查看详情"的图标,用户点击后跳出弹出框来 ...
Android仿IOS封装通用的弹出框Dialog和底部弹出列表选择框仿美团顶部条件筛选框附自定义ViewGroup
弹出框背景提示与询问弹出框实现使用列表选择框实现使用顶部条件筛选框实现自定义ViewGroup 使用总结背景鉴于Android提供的默认弹出框很一般,IOS的弹出框样式还不错 ...
vue-element-ui的各种弹出框样式修改
vue-element-ui的弹出框与#app同级,以下为各种弹出框样式修改方式: 1.组件中存在popper-append-to-body属性 2.使用popper-class属性修改弹出框样式 3 ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
学习使用Bootstrap弹出框Popover提示框样式
学习使用Bootstrap弹出框Popover提示框样式注意事项弹出方向失去焦点隐藏禁用元素弹出提示框 data属性详解 js方法与事件方法: 事件: 注意事项 popover提示框组件依赖 ...
Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打 ...
Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

Bootstrap 提示工具（Tooltip）弹出框

第一步：

第二步在body中写

第三步也js代码

用法

实例1

实例2

实例3

Bootstrap 提示工具（Tooltip）弹出框相关推荐

最新文章

热门文章

Bootstrap 提示工具（Tooltip）弹出框

第一步：

第二步 在body中写

第三步 也js代码

用法

实例1

实例2

实例3

Bootstrap 提示工具（Tooltip）弹出框相关推荐

最新文章

热门文章

第二步在body中写

第三步也js代码