How to Create a Tooltip For Hyperlink in Blogger

What is a tooltip? A tooltip is a text in box which is displayed over a hyperlink, when you move your mouse cursor on the link. Tooltips are used for displaying extra text over links. Tooltips can be used for all sorts of things i.e descriptions, definitions, word meanings etc. You might have seen different types of tooptips on many blogs. So, today we are going to share a simple and beautiful tooltip for your blog. In the image below "Text to Show" is your text and link and the text in the blue box just above it is your tooltip.

How to Create a Tooltip For Hyperlink in Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template and Click on Edit HTML button
Step 3. Now search for the ]]></b:skin> tag
Step 4. Copy the below code and paste it just above/before the ]]></b:skin> tag

/* Tooltip Provided by blogolect.blogspot.com */
a:link,
a:visited {
position:relative;
}
.bgttooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:5px;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
color:#2B2B2B;
background:#2aa4cf;
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1));
background: #2aa4cf;
border-color:#2aa4cf;
}
.bgttooltip:before,
.bgttooltip:after
{
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.bgttooltip:before
{
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
a:hover .bgttooltip
{
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.bgttooltip,
.bgttooltip.left {
left:0;
right:0;
}
.bgttooltip:before,
.bgttooltip:after,
.bgttooltip.left:before,
.bgttooltip.left:after {
left:40px;
right:auto;
}
.bgttooltip:before {
border-top-color:#2aa4cf;
}
.bgttooltip:after {
border-top-color:#2aa4cf;
}
/* Tooltip Provided by blogolect.blogspot.com */

Step 5. Click on Save Template button

How to Use this Tooltip for Hyperlink

In the post editor click HTML and paste the following code where you want to use it

<a href="Your-Link-URL">Text to Show<span class="bgttooltip">Your Tooltip Text</span></a> 

Customization:

• Replace Your-Link-URL with your URL 

• Replace Text to Show with the text you want to show before hover

• Replace Your Tooltip Text with the text you want to show in tooptip on mouse hover

Step 6. Click on Publish button
And you're done!!

Share This:

Tags:

Blogging Tips CSS Tricks

• Prevoius
• Next