Add Tool Tip In Posts In Blogger

For the people who don't know what is tool tip. It's a message or information that will appear over a text or image on mouse hover. A tool tip doesn't need the mouse click and it simply works on the mouse hover.

Add Tool Tip In Posts In Blogger

A tool tip is a great tool to store information about anything. It not saves space on your blog post but also gives a stylish look to your blog.

By using tool tip you can hide the stuff to show the real content your post. This tool will help you easily show the related information of any text or image right in that place.

Move your mouse over here
Main info I'm main info Sub info I'm sub info

A simple demo can be seen above on how it will work on your blog.

This tool is fully customisable and can be installed very easily.

Steps to follow

  • Open blogger
  • Make/edit a post/page
  • Copy this code and paste in HTML mode of post editor

<div class="tool-tip">
<i class="tool-tip__icon">i</i>
            <br />
<div class="tool-tip__info">
<span class="info"><span class="info__title">Main info</span> I'm main info</span>
              <span class="info"><span class="info__title">Sub info</span> I'm sub info</span>

  • Publish/update your post/page

  • Now copy this code and paste in

Template > Customise > Advacned > Add CSS
.tool-tip {
  display: inline-block;
  position: relative;
  margin-left: 0.5em;
.tool-tip .tool-tip__icon {
  background: #27b1f0;
  border-radius: 10px;
  cursor: pointer;
  display: inline-block;
  font-style: italic;
  font-family: georgia;
  height: 18px;
  text-align: center;
  width: 20px;
.tool-tip .tool-tip__info {
  display: none;
  background: #262626;
  border: 1px solid #27b1f0;
  border-radius: 3px;
  font-size: 0.875em;
  padding: 1em;
  position: absolute;
  left: 30px;
  top: -10px;
  width: 160px;
  z-index: 2;
.tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after {
  content: "";
  position: absolute;
  left: -10px;
  top: 7px;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #27b1f0;
.tool-tip .tool-tip__info:after {
  left: -8px;
  border-right-color: #262626;
.tool-tip .tool-tip__info .info {
  display: block;
.info {
color: white;
.tool-tip .tool-tip__info .info__title {
  color: #0066ff;
.tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info {
  display: inline-block;
a:focus + .tool-tip .tool-tip__info {
  display: inline-block;

  • Click on 'Apply to Blog'


To customise this tool change the value/text according to your need. I'm going to make it really easy for anyone.

Customise Info Image

Every code is highlighted above so that you can find it easily.

To change the text in tool tip just type anything in first code you copy in post editor.

Simple isn't it?

I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.


Don't forget to check 'Notify me' box to get notification of reply.