How To Usage A Tooltip Lawsuit Inward Blogger Using Css3 Together With Without Using Jquery

Create a tooltip hover outcome inward your blogs using to a greater extent than or less CSS3 styling. This method doesn't role whatsoever JavaScript code...

Creating tooltip inward webpages was hard without JavaScript libraries. Now using alone to a greater extent than or less CSS3 codes, it is possible to exercise prissy tooltip effects. Whenever nosotros hover, it shows tooltip amongst elementary transition effects. This tin flame live on implemented amongst links, images in addition to fifty-fifty amongst elementary text.
First nosotros request to add together to a greater extent than or less code to agency section. Go to your Blogger dashboard, direct maintain Template in addition to and thus Edit HTML. Click on proceed when dialogue box appears. Now search for ]]></b:skin>. Add next code simply inward a higher house ]]></b:skin>

.tooltip em { min-width: 110px; text-align: center; font: italic; position: absolute; z-index: 4; background: #474747; color:#fff; border: corporation 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 remain 0.5s; -webkit-transition: all 1s remain 0.5s; -o-transition: all 1s remain 0.5s; top:5px;left:50%;margin:-40px;  } .tooltip em:after { content: " "; font-size: 0px;  line-height: 0%;  width: 0px; border-top: 5px corporation #999; border-left: 4px corporation transparent; border-right: 4px corporation transparent; position: absolute; bottom: -5px; left: 50%; z-index: 1; } .tooltip:hover > em { display: block; }

Now Save Template. Now y'all tin flame role tooltip outcome inward your blog.
The reddish colored 474747 can live on changed to other values for changing background color. The dark-green colored number fff can live on changed for changing tooltip text color.
Tooltip outcome tin flame live on used yesteryear adding tooltip bird in addition to embedding tooltip text inward em tag.

• For elementary 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 post