CSS工具提示

We all know that you can make shapes with CSS and a single HTML element, as I've covered in my CSS Triangles and CSS Circles posts.  Triangles and circles are fairly simply though, so as CSS advances, we need to stretch the boundaries of single-element widgetry.  One of those "widgets" we can now create with pure CSS is the tooltip;  let's take a look at how to create a tooltip with just one element and CSS :before and :after magic.

我们都知道，您可以使用CSS和单个HTML元素制作形状，正如我在CSS Triangles和CSS Circles帖子中所介绍的那样。 三角形和圆形非常简单，因此随着CSS的发展，我们需要扩展单元素窗口小部件的边界。 我们现在可以使用纯CSS创建的“小部件”之一就是工具提示。 让我们看一下如何仅使用一个元素以及CSS :before和:after魔术来创建工具提示。

View Demo 观看演示

The HTML HTML

Like CSS triangles and CSS circles, we can accomplish this task using a single HTML element:

像CSS三角形和CSS圆一样，我们可以使用单个HTML元素完成此任务：

<div class="tip">
	Lorem ipsum dolor sit amet...
</div>

You need only populate the DIV with the content of your choosing.  If you were looking to create a legacy solution, another element would need to be a added to this DIV, and the CSS triangles solution would need to be used.

您只需要用您选择的内容填充DIV。 如果您要创建旧式解决方案，则需要在此DIV中添加另一个元素，并且需要使用CSS三角形解决方案。

The CSS CSS

Basic styling of the tooltip can be however you'd like, but the arrow (triangle) portion of the tooltip will be drawn using the :before and :after selectors.  One of them will be an arrow with same color as the tooltip background, the other will give the appearance of a matching border.

您可以根据需要设置工具提示的基本样式，但是工具提示的箭头(三角形)部分将使用：before和：after选择器绘制。 其中一个将是与工具提示背景颜色相同的箭头，另一个将显示匹配边框的外观。

/* base CSS element */
.tip {
	background: #eee;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	position: relative;
	width: 200px;
}

/* arrows - :before and :after */
.tip:before {
	position: absolute;
	display: inline-block;
	border-top: 7px solid transparent;
	border-right: 7px solid #eee;
	border-bottom: 7px solid transparent;
	border-right-color: rgba(0, 0, 0, 0.2);
	left: -14px;
	top: 20px;
	content: '';
}

.tip:after {
	position: absolute;
	display: inline-block;
	border-top: 6px solid transparent;
	border-right: 6px solid #eee;
	border-bottom: 6px solid transparent;
	left: -12px;
	top: 21px;
	content: '';
}

You'll notice that the :before and :after generations are using the CSS triangle technique.  Also note the main element requires relative positioning so that the :before and :after virtual elements can be absolutely position correctly.  Also realize that you can place the tooltip arrow on the top, bottom, left, or right of the main element, making the solution presented here incredibly flexible!

您会注意到：before和：after世代都在使用CSS三角技术。 还要注意，主要元素需要相对定位，以便：before和：after虚拟元素可以绝对正确地定位。 还应意识到，您可以将工具提示箭头放置在主要元素的顶部，底部，左侧或右侧，从而使此处提供的解决方案非常灵活！

View Demo 观看演示

The obvious drawback is lack of legacy IE support.  This effect should work with IE9 and above, while IE8 will be quite touchy.  Also note that the solution above covers only the visual aspect of the tooltip -- it does not do positioning.  Positioning and window-measurements will need to be implemented with JavaScript, so your best bet is using an existing positioning library for doing such.  The ability to create the complete tooltip interface with one HTML element and a bit of CSS is excellent!

明显的缺点是缺少旧版IE支持。 此效果应在IE9及更高版本上起作用，而IE8则非常敏感。 还要注意，上面的解决方案仅涵盖工具提示的视觉方面，而不是定位。 定位和窗口测量将需要使用JavaScript来实现，因此最好的选择是使用现有的定位库来执行此操作。 使用一个HTML元素和一些CSS创建完整的工具提示界面的能力非常出色！

翻译自: https://davidwalsh.name/css-tooltips