Using CSS pseudo element to realize ToolTip effect

Used to be a JS to achieve the ToolTip effect, now in fact, can use the pseudo elements of CSS to achieve, will be simpler, the effect is also very good.

<style> tooltip a {position:relative;}
        . tooltip A::before {border-left:10px solid transparent;
        border-right:10px solid Transparent;
        border-top:10px solid #abcdef;
        Position:absolute;
        left:0%;
        bottom:90%;
        Content: "";
        height:0;
        width:0;
        opacity:0; margin:0
        0 20px 15px;
    Transition:all 0.4s Ease;
        }. tooltip A::after {border-radius:5px;
        Background: #abcdef;
        Color: #000;
        Position:absolute;
        left:0%;
        bottom:130%;
        Content:attr (Data-tooltip);
        White-space:nowrap;
        padding:5px 15px;
        margin-bottom:15px;
        opacity:0;
    Transition:all 0.4s Ease;
    }. tooltip A:hover::before {bottom:65%;}
    . tooltip A:hover::after {bottom:90%;} . tooltip a:hover::after,. tooltip a:hover::before {opacity:1;} </style> <p class= "tooltip" > <a data-tooltip= "Hello, this is Maj.Ormayer "href=" > Mouse hover over me try </a></p> 

If you want the ToolTip to be used to display the error message after the input box is validated, you can simply input the input box with a span package and give all the styles to that span. New style:

. tooltip{
        position:relative;

    Tooltip::before {
        border-left:10px solid transparent;
        border-right:10px solid transparent;
        border-top:10px solid #abcdef;
        Position:absolute;
        left:0%;
        bottom:90%;
        Content: "";
        height:0;
        width:0;
        opacity:0;
        margin:0 0 20px 15px;
        Transition:all 0.4s Ease;
        bottom:65%;
        Opacity:1
    }

    . tooltip::after {
        border-radius:5px;
        Background: #abcdef;
        Color: #000;
        Position:absolute;
        left:0%;
        bottom:130%;
        Content:attr (data-tooltip);
        White-space:nowrap;
        padding:5px 15px;
        margin-bottom:15px;
        opacity:0;
        Transition:all 0.4s Ease;
        bottom:90%;
        opacity:1;
    }

HTML:

Guaranteed Income:
<span data-tooltip= "Please enter 2 decimal digits positive real number" >
<asp:textbox id= "TextBox1" runat= "Server" onblur= " Isoublenum (This) "></asp:TextBox>
</span>
 exceeding the Guaranteed commission rate:
<span data-tooltip=" Please input 2 decimal positive real number ">
<asp:textbox id=" TextBox2 runat= "Server" onblur= "Isoublenum (This)" ></asp:TextBox>
< /SPAN>

example is the use of regular validation input is 2 digits within the decimal, JS method:

function Isoublenum (Element)//Whether 2-bit decimal
        {
            var parent = Element.parentnode;
            var num = element.value;
            if (num = = "") {
                parent.classname = "ToolTip"; Parent.setattribute ("Data-tooltip", "Do not fill out will default to 0");
                settimeout (function () {parent.classname = "";}, \ n);
            } else {
                var reg =/^\d+ (?: \. \d{1,2})? $/ig;
                if (reg.test (num) = False) {
                    Parent.classname = "ToolTip"; Parent.setattribute ("Data-tooltip", "should be reserved for 2 decimal places positive real numbers"); C10/>settimeout (function () {parent.classname = "";}, \ n);
                }
                else {
                    parent.classname = "";
                    Parent.setattribute ("Data-tooltip", "");}}}
        

var parent is the span that is wrapped in this input box that is found more this. add style to change span:parent.className = "ToolTip"; The validation information to be displayed is passed to the Data-tooltip custom attribute: Parent.setattribute ("Data-tooltip", "should be reserved for 2 decimal digits in positive real numbers"); Finally, the settimeout in the real ToolTip after 2 seconds disappear: settimeout (function () {parent.classname = ";},"); It's time to disappear without animation, you can add it if you need it, hehe.
Effect Chart:

you can enter it correctly without prompting:

Thank you for your suggestion, if in the use of what is not clear where you can QQ Me (majormayer): 1414294708, we learn together.