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.
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.
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
Template > Customise > Advacned > Add CSS
Customise
To customise this tool change the value/text according to your need. I'm going to make it really easy for anyone.
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?
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>
</div>
</div>
- 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 {
color:white;
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'
Customise
To customise this tool change the value/text according to your need. I'm going to make it really easy for anyone.
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?
0 comments:
Don't forget to check 'Notify me' box to get notification of reply.