The tooltip that we have now are a bit boring. They really don't have those fancy ways of showing tooltip. well, maybe because it doesn't really need to have to - be stylish. But at least there are some options for us to prettify it, for Brad Knutson a pure pledge use of CSS is way better than using a jQuery (See his blog here.). For him, which I agree, having the use of CSS unto tooltip is less cumbersome where in jQuery it requires first to have a jQuery library 2.0, where in CSS you just to simply add the codes and boom! you now have it. His blog post doesn't really show or instruct you on how to add this stylish tooltip in Blogger. Good thing I'm here to help you, I will be teaching you on how to add stylish tooltip using CSS in Blogger. Its pretty simple so let's get started.
You can actually add the tooltip in :
1. Inside Blog Post
2. Inside a Widget/Gadget
3. Wherever you can put it (if you're a pro. Haha.)
And no matter where you put them they share the same line of codes.
On this tutorial you will me adding the tooltip on a blog post.
First, we need to add the HTML Code on a blog post. So create first a blog post then add this HTML Codes.
This is how I done it here as you can see on the demo above.
- Never remove the <a> tag and <span> tag, doing so will remove the tooltip effect.
- Content should only be inside <span> tag.
<a class="tooltip-example">
HOVER ME PLEASE
<span> THIS IS THE TEXT INSIDE THE TOOLTIP!<br />
<img src="IMAGE-LINK-HERE">
</span></a>
Second, let's add the CSS Code.
- I added an anatomy of the tooltip for your reference.
<style type="text/css">
.tooltip-example {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip-example > span {
text-align: center;
color: #EEEEEE;
font-size: 16px;
font-family: Oswald;
line-height: 1.5;
background: #FF0033;
background-clip: padding-box;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
border: 0px solid black;
border-radius: 3px;
position: absolute;
width: auto;
left: 50%;
margin-left: -175px;
padding: 10px 0px;
bottom: 100%;
margin-bottom: 10px;
visibility: hidden;
opacity:0;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.tooltip-example > span:before, a > span:after {
content: "";
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 100%;
left: 50%;
margin-left: -10px;
}
.tooltip-example > span:before {
border-top: 10px solid #FF0033;
margin-top: 0px;
}
.tooltip-example:hover > span {
visibility: visible;
opacity: 1;
</style>