Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make tooltip using pure css?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 209
    Comment on it

    Hi all,

    Below is an example to make a tooltip using pure CSS. In this method, we are using custom HTML attribute which we are defined here as tooltip and we are using pseudo element.

    The best thing with this method or technique it works in IE9 and partially in IE8.

    CSS -

    [tooltip]:before {
        content: attr(tooltip);
        position: absolute;
        opacity: 0;
        transition: all 0.15s ease;
        padding: 10px;
        color: #333;    
        box-shadow: 2px 2px 5px #ccc;    
        color: #ccc;
    }
    
    [tooltip]:hover:before {
        opacity: 1;
        background: #191919;
        margin-top: -20px;
        margin-left: 20px;   
    }
    
    [tooltip]:not([tooltip-persistent]):before {
        pointer-events: none;
    }
    div {
        
        background: #ccc;
        margin: 20px;
        padding: 5px;
    }

     

    HTML -

     

    <div tooltip="Hi, I'm a tooltip. Pretty easy uh ? ;)">Div with standard tooltip. Hover me to see the tooltip. Hovering the tooltip doesn't matter if you hover out of my boundaries, the tooltip will disappear.</div>
    
    <div tooltip="Hi, I'm a persistent tooltip." >Div with persistent tooltip. Hover me to see the tooltip. The tooltip won't expire until you hover on me OR it.</div>

     

    Click for rendered output

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: