提示冒泡Tooltip

提示冒泡Tooltip

开发工具与关键技术：Visual Studio 前端

作者：盘子

撰写时间：2019年6 月8日

Tooltip的意思为工具提示、提示信息、提示框或者是提示文本，在这里我们就称其为提示冒泡，就如生活中的聊天软件里的聊天泡泡框，而这里的提示冒泡主要用于提示内容和标记。而使用提示冒泡Tooltip组件需要注意一下几点：

Tooltip提示冒泡组件依赖于 Popper.js ，你必须将popper.min.js 文件放在 bootstrap.js之前调用，或用 bootstrap.bundle.min.js / bootstrap.bundle.js这两个已经包含了 Popper.js 的脚本。
标题（或内容）零长度情况下，Tooltip提示冒泡插件不会显示（生效）。
在隐藏元素上触发Tooltip提示冒泡插件不会起作用（无效行为）。
Tooltip提示冒泡插件的.disabled 或 disabled 元素必须放在外层（父层）元素上。
如果从一个跨多行的链接上触发Tooltip提示冒泡插件，提示冒泡将居中，在你的<a>上使用white-space: nowrap; 可避免这种行为（即回归左右对齐）。
必须先隐藏Tooltip提示冒泡插件，然后才能从DOM中删除相应的元素。

Tooltip提示冒泡插件是可以在任何地方启用的，可以是在一段文字上，也可以在按钮上提示冒泡效果。

用法：Tooltip提示冒泡插件是使用data-toggle来进行选择的。

tooltip提示冒泡插件根据需要生成内容和标记，默认情况下我们将它放在触发元素之后。

标记

工具提示框所需要的标记只是一个data 元素和你希望拥有一个tooltip提示冒泡HTML元素上的 title ，tooltip提示冒泡插件的标记很简单，尽管它需要一个位置（默认是 top 顶部指示）。

选项：可以通过数据属性或JavaScript传递选项，如果使用数据属性，请将选项名称附加到data-,如data-animation=””。

Animation 将CSS淡入淡出应用于tooltip提示冒泡。

单个提示冒泡的数据属性：单个提示冒泡的选项可以通过使用data数据属性来替补指定。

当你想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

用法

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

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

$(‘#identifier’).tooltip(options)

工具提示（Tooltip）插件不像下拉框以及其他插件那样，它不是纯粹的CSS插件。如果使用该插件，你必须使用jQuery激活它（读取JavaScript）。使用下面脚本来启用页面中的所有工具提示（tooltip）

$(function () { $(“[data-toggle=’tooltip’]”).tooltip();});

使用方法可以给任何元素添加 title 属性或 data-original-title 属性，来定义提示的内容。工具提示插件优先使用 title 属性的值作为提示内容，如果没有提供 title 属性或它的值为空，才使用 data-original-title 属性的值作为提示内容。以下两种声明方式的效果相同：

<a href="#" data-toggle="tooltip" title="This is the tooltip">Tooltip Example</a>

<a href="#" data-toggle="tooltip" data-original-title="This is the tooltip">Tooltip Example</a>

下面是鼠标放到<a>标签上的文字链接时出现提示冒泡的代码，见代码截图如下：

更多有关提示冒泡属性、功能，在这次的小结里就不多说了，可自行查阅资料去了解，

提示冒泡的方向：tooltip提示冒泡可以使用四个方向：顶部对齐、右对齐、底部对齐、左对齐。如下面的效果图图一所示，把鼠标放到文字链接上会出现提示冒泡，冒泡可设置方向，如下面效果图图一、图二

提示冒泡Tooltip相关推荐

html鼠标移动到图片上显示冒泡框,Bootstrap 教程 - 提示冒泡(Tooltip)
提示冒泡(Tooltip) 使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例,用于本地标题存储的动画和数据属性. 概览使用提示冒泡持件时应了解以下:Tool ...
4.19、Bootstrap V4自学之路-----内容---提示冒泡
为什么80%的码农都做不了架构师?>>> 我一直没有调试出来,包裹引入tether.min.js仍然无法出发效果. mark着,回头再看.先熟悉文档. 概述在使用提示冒泡插件 ...
a按钮居中显示 bootstrap_Bootstrap提示冒泡样式
使用提示冒泡持件时的注意事项: Tooltip提示冒泡组件依赖于 Popper.js ,你必须将popper.min.js 文件放在 bootstrap.js之前调用,或者使用 bootstrap.b ...
DataGridView设置单元格的提示内容ToolTip详解
这篇文章介绍了DataGridView设置单元格提示内容ToolTip的方法,文中通过示例代码介绍的非常详细.对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 ToolTip属性用来设置 ...
echarts 4.0.4怎么下载_怎么让ECharts的提示框tooltip自动轮播?
1. 怎么让ECharts的提示框tooltip自动轮播? 在用ECharts做大屏或者可视化展示项目的时候,让提示框tooltip自动轮播是比较常见的需求,给大家推荐一个插件叫echarts-too ...
教你玩转CSS 提示工具(Tooltip)
如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移动到指定元素后触发基础提示框(Tooltip) 提示框在鼠标移动到指定元素上显示: <style>/* Tooltip ...
第二十二课--提示工具(Tooltip)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html5 tooltip,HTML5 教程之CSS 提示工具(Tooltip)
CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移动到指定元素后触发,先看以下四个实例: 头部显示右边显示底部显示左边显示 ...
（转）echarts 提示框tooltip被遮挡的解决办法
当echart的容器外部 dom 被设置为 overflow: hidden 时,提示框会被遮挡. 解决办法: 一.tooltip. confine tooltip: {confine: true / ...

提示冒泡Tooltip

标记

用法

提示冒泡Tooltip相关推荐

最新文章

热门文章