“..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..”
The words that have tooltips attached have a grey background, when hovered over the tooltip appears with a small question mark beside the cursor.
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 :
text-decoration: none;color: #222;
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-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);
border: 0; /* IE6 fix */
margin-left: -8px;border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
Note – The highlighted sections are the colors of the tooltips and can be changed to suit your blog.See some color options here – Color Chart.
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>
So on the demo page you seen the first tooltip is coded like this :
<a href=”#” class=”tooltip”>Phasellus fermentum <span>This is the tooltip description</span></a>
That’s a Css only Tooltip, credit goes to Red Team Design.
Drop your comments and questions below.