Create a tooltip hover effect in your blogs using some CSS3 styling. This method doesn’t use any JavaScript code…

How to create a tooltip effect in blogger using CSS3 and without using jQuery

Creating tooltip in webpages was difficult without JavaScript libraries. Now using only some CSS3 codes, it is possible to create nice tooltip effects. Whenever we hover, it shows tooltip with simple transition effects. This can be implemented with links, images and even with simple text.
First we need to add some code to style section. Go to your Blogger dashboard, take Template and then Edit HTML. Click on proceed when dialogue box appears. Now search for ]]></b:skin>. Add following code just above ]]></b:skin>

.tooltip em {
min-width: 110px;
text-align: center;
font: italic;
position: absolute;
z-index: 4;
background: #474747;
border: solid 1px #ccc;
padding: 4px 1px;
white-space: nowrap;
display: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-transition: all 1s ease 0.5s;
-webkit-transition: all 1s ease 0.5s;
-o-transition: all 1s ease 0.5s;
.tooltip em:after {
content: &quot; &quot;;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 5px solid #999;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
bottom: -5px;
left: 50%;
z-index: 1;
.tooltip:hover &gt; em {
display: block;

Now Save Template. Now you can use tooltip effect in your blog.
The red colored 474747 can be changed to other values for changing background color. The green colored number fff can be changed for changing tooltip text color.
Tooltip effect can be used by adding tooltip class and embedding tooltip text in em tag.

  • For simple texts
<div class='tooltip'>Your text<em>This is a tooltip text.</em></div>
  • For links
<a class='tooltip' href="yourlink"> Linking text<em>This is a tooltip text.</em></a>
  • For images
<div class='tooltip'> <img src="imagelink"><em>This is a tooltip text.</em></img>

Share this article