Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Crossbrowser Pure CSS expandable tool tips

When you want to create beautiful tooltip, you'll probably end up using some images, but main problem with images, is that it will limit area of tooltips text. But when your tooltips have practical nature, you can simply use this template for creating crossbrowser toolips which aren't limited to any size and are pure CSS without any images.

So we will use this CSS layout for our Tool tips:
.tooltip
{
    position: relative;
}
.tooltip span
{
    display: none;
    position: absolute;
    
    /** Customize it the way you want **/
    border: 1px solid #cccccc;
    background-color: #000;
    color: #fff;
    padding: 10px;
    font-size: 12px;
    min-width: 100px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    -khtml-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    -webkit-opacity: 0.9;
    -o-opacity: 0.9;
    opacity: 0.9;
}
/*Top tooltip*/
.tooltip:hover span.t-top
{
    display: block;
    bottom: 100%;
    left:0;
    /*offset*/
    margin-bottom: 10px;
}
/*Bottom tooltip*/
.tooltip:hover span.t-bottom
{
    display: block;
    top: 100%;
    left:0;
    /*offset*/
    margin-top: 10px;
}
/*Left tooltip*/
.tooltip:hover span.t-left
{
    display: block;
    top: 0;
    right: 100%;
    /*offset*/
    margin-right: 10px;
}
/*Right tooltip*/
.tooltip:hover span.t-right
{
    display: block;
    top: 0;
    left: 100%;
    /*offset*/
    margin-left: 10px;
}

And here is how we use them:

<p class='tooltip'>Tooltip top<span class='t-top'>Text from top</span></p>
<p class='tooltip'>Tooltip left<span class='t-left'>Text from left</span></p>
<p class='tooltip'>Tooltip right<span class='t-right'>Text from right</span></p>
<p class='tooltip'>Tooltip bottom<span class='t-bottom'>Text from bottom</span></p>

And here is an example:

Tooltip topText from top

Tooltip leftText from left

Tooltip rightText from right

Tooltip bottomText from bottom


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus