将鼠标悬停在错误符号上时会显示错误消息

Question

我需要以下字段验证效果，但我很难想出CSS。

基本上，如果需要，我可以在字段末尾显示红色信息标志（这在表单提交发生后发生）：

我喜欢这个，但是当你将鼠标悬停在红色感叹号上时，我还希望显示一条详细的信息 - 理想情况下，它位于输入框的正下方，如下所示：

我该怎么做？ 我已经启动了一些CSS，但需要帮助才能完成它 - 请参阅下面的链接。

http://cdpn.io/rKLhl

Answer 1

你在一个问题中提出了很多不同的事情......这里有一些要点：

演示：http://jsfiddle.net/LNr6f/1/

1）您必须创建隐藏 div，并在需要触发错误消息时显示它（我已经使用了{{ 1}}事件作为触发器，只需根据您的需要进行调整）;

2）您可以使用hover创建圆形边框;

3）你可以用CSS创建渐变背景，你很幸运，因为那里有一个CSS Gradient Generator，它将提供一个很好的编辑器和跨浏览器代码（我在示例中使用了简单的红色背景）;

4）您必须保持与文本框相关的工具提示的位置;使用CSS border-radius和relative定位，例如。

5）您需要一个箭头，它可以是一个图像，但也可以使用纯CSS创建，如示例中所示，使用{{1} } absolute（或CSS pseudo-class），有三个透明边框，一个是彩色的，相互折叠并创建三角效果。然后你需要在绝对定位的帮助下将它移出div并将其置于x轴中心。

你可以从这里开始，祝你好运。

示例HTML

:before

示例CSS

:after