Css Only Tooltip Hover Descriptions For Blogger

The Tooltip has become a common resource and is used by all the major sites to describe a link or give more help and information on a section of text.Often when using Google products you will see a small question mark that you can hover over to see a pop up with more information.

"..The tooltip or infotip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.."

Add The Pure Css Tooltips To Your Blog

To use the tooltips on your blog you need to first add the Css to your template, we will add it via the template designer so its very easy.You then just add some tags around the words or sentences you want to have tooltips.This works across the browsers, although IE wont have the transparent effect on the actual tip it still looks great.

Add the Css to your blog

Step 1. In your Blogger dashboard click > Design > Template Designer :

Step 2. In the template designer click > Advanced > Add Css > :

Step 3. Copy and paste the following code into the section with 'Paste Code Here' in image above :

.tooltip
{
position: relative;
background: #eaeaea;
cursor: help;
display: inline-block;
text-decoration: none;

color: #222;

outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;

border: 2px solid #ccc;

opacity: .9;

background-color: #ddd;

background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;

border-top: 8px solid #ddd;

border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before
{

border-top-color: #ccc;

bottom: -8px;
}

Note - The highlighted sections are the colors of the tooltips and can be changed to suit your blog.

Step 4. Click apply to blog in the top right of your screen to save, we now have the Css in place to create the tooltip next we will see how to add the tool tip to text.

Adding the tooltip to text

When writing a post and you want to add a tool tip to some text you do it as shown below :


<a href="#" class="tooltip">
The Text That Will Have A Tooltip
<span>The Actual Description That Appears On Hover</span>
</a>

That's a Css only Tooltip.