Motyar

@motyar

Freelance Web Developer

Static Web Hosting, made easy

Dec 29, 2009

Simplest tooltip with pure css

If you search web for a tooltip; you will found a lot of  Tooltips that requires js or jquery tool tips. Here i am introducing you to the simplest tool tip with pure CSS.


I love to keep things short and sweet. I was trying to make a simple tool-tip for this blog. I got success and i am sharing this with you.

Its as simple a hidden span withing the anchor tag  that will be shown on the hover action.

You can customize your with different tags that supports hover action( i think all tags do).

The CSS

a {
    text-decoration:none;
   }
a span {
    display:none;
    padding:2px 3px;
    margin-left:0px;
   }
a:hover span{
     display:inline;
     position:absolute;
     border:1px solid #FF00FF;
     background:#FFE4F6;
     color:#2BA94F;
    }

You can change the position by changing span's margins.


The HTML

<a href=http://motyar.com >Hover me<This is a tool-tip.</span></a>


Demo
Hover meThis is a tool-tip

Labels:




By :