CSS 提示工具(Tooltip)

ゞ浴缸里的玫瑰 2021-09-15 06:28 373阅读 0赞

## 基础提示框(Tooltip) ##

![SouthEast][]

![SouthEast 1][]

### 实例解析 ###

HTML) 使用容器元素 (like <div>) 并添加 **"tooltip"** 类。在鼠标移动到 <div> 上时显示提示信息。

提示文本放在内联元素上(如 <span>) 并使用**class="tooltiptext"**。

CSS)**tooltip** 类使用 **position:relative**, 提示文本需要设置定位值 **position:absolute**。 注意: 接下来的实例会显示更多的定位效果。

**tooltiptext** 类用于实际的提示文本。模式是隐藏的，在鼠标移动到元素显示 。设置了一些宽度、背景色、字体色等样式。

CSS3 **border-radius** 属性用于为提示框添加圆角。

**:hover** 选择器用于在鼠标移动到到指定元素 <div> 上时显示的提示。

## 定位提示工具 ##

以下实例中，提示工具显示在指定元素的右侧(**left:105%**) 。

注意 **top:-5px** 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px。

如果你修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的。

在提示框显示在左边的情况也是这个原理。

![SouthEast 2][]

![SouthEast 3][]

![SouthEast 4][]

![SouthEast 5][]

![SouthEast 6][]

如果想设置文本提示框在下方显示只需要设置 它的上下位置的百分比就可以调试它的上下位置 top与bottom值

设置箭头   以及设置提示框的行间距

![SouthEast 7][]

![SouthEast 8][]

### 实例解析 ###

在提示工具内定位箭头: **top: 100%** , 箭头将显示在提示工具的底部。**left: 50%** 用于居中对齐箭头。

注意：**border-width** 属性指定了箭头的大小。如果你修改它，也要修改 **margin-left** 值。这样箭头在能居中显示。

**border-color** 用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。

以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色：

![SouthEast 9][]

## 淡入效果 ##

我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:

![SouthEast 10][]

[SouthEast]: /images/20210813/0ffa3120d55d419299246106e1917a54.png
[SouthEast 1]: /images/20210813/aeec583c6a8841278be993647d629f9d.png
[SouthEast 2]: /images/20210813/621b5ec0006740e2936a463d4a765424.png
[SouthEast 3]: /images/20210813/3ec29a5de64a41d2b0a802f513216944.png
[SouthEast 4]: /images/20210813/86adc13975594f2ba1e26f5431e9ccce.png
[SouthEast 5]: /images/20210813/eb3ad22309be4a92b6d26ba140723134.png
[SouthEast 6]: /images/20210813/87c6bac418bb49ff9fee95d85e3ea778.png
[SouthEast 7]: /images/20210813/2f6f2bb904bd4c58a9c6fb3720641549.png
[SouthEast 8]: /images/20210813/6aff5a9ee72a4eba9facafdb93626e0b.png
[SouthEast 9]: /images/20210813/60d49092f0f344fa85bc4b7ade694075.png
[SouthEast 10]: /images/20210813/1e5643c62f024db684a10b40c81e6816.png