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

Question

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

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

我喜欢这样，但我也希望在您将鼠标悬停在红色感叹号上时显示一条详细消息 - 最好是在输入框下方的中央，如下所示：

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

http://cdpn.io/rKLhl

Answer 1

您在一个问题中提出了很多不同的问题……以下是要点：

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

1）您必须创建一个隐藏 div的，并在需要触发错误消息时显示它（我已将hover事件用作触发器，只需根据您的需要进行调整即可）；

2)您可以使用;创建圆角边框CSS border-radius

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

4）您必须保持与文本框相关的工具提示的位置；使用relative和absolute定位如示例。

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

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

示例 HTML

<div id="container">
    <input type="text" class="trigger" />
    <div class="tooltip">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Nunc gravida commodo mauris non sodales. Nunc consectetur 
        mattis arcu eu pharetra. Curabitur metus felis, tempus eu 
        mattis ut, auctor euismod lacus. Praesent ultrices convallis 
        odio, at vestibulum nulla faucibus nec. Nam euismod suscipit 
        massa, non euismod dui gravida ut. 
    </div>
</div>

示例 CSS

#container {
    position: relative;
    border: 1px dashed silver;
    width: 100%;
    height: 300px;    
}

#container > .trigger{
    width: 300px;    
}

#container > .tooltip{
    position: absolute;
    display: none;
    background-color: red;     
    width: 200px;    
    left: 50px;
    top: 40px; 
    border-radius: 10px;
    padding: 10px;
    color: white;
}

#container > .tooltip:before {
    position: absolute;
    content: '';
    border-width: 10px;
    border-style: solid;
    border-color: rgba(255,255,255,0) rgba(255,255,255,0) red rgba(255,255,255,0);
    top: -20px; 
    left: 90px;    
}

#container > .trigger:hover + .tooltip {
    display: block;
}