Making error message appear when hovering over err

Question

I need the following field validation effect but I am struggling to come up with the CSS.

Basically at the moment I can show a red info sign at the end of field if it is required (this happens after the form submit happens):

I like this but I would also like a detailed message to appear when you hover over the red exclamation mark - ideally centrally just underneath the input box, like this:

How would I do this? I have started some CSS already but need help to get it finished - see the link below.

http://cdpn.io/rKLhl

Answer 1

You are asking a lot of different things within one question... here are the main points:

Demo: http://jsfiddle.net/LNr6f/1/

1) You have to create an hidden div, and show it when you need to trigger the error message (I've used the hover event as trigger, just adapt it to your needs);

2) You can create rounded borders with CSS border-radius;

3) You can create gradiented backgrounds with CSS, and you are lucky because there is a CSS Gradient Generator out there that will provide a nice Editor and the cross-browser code for you (I've used a simple red background in the example);

4) You have to keep the position of the tooltip related to the textbox one; use relative and absolute positioning as in the example.

5) You need an arrow, that can be an image, but that can be created with pure CSS too, as in the example, using CSS pseudo-class :before (or :after), with three transparent borders and one colored, collapsing on each others and creating the triangle effect. Then you need to move it out of your div and to center it on the x axis, with the help of absolute positioning.

You can start from here, good luck.

Sample 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>

Sample 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;
}