How to create a mouse hover Tooltip icon with Css and Html codes - With the help of this tooltip icon you can explain and inform about your blog. This Tooltip will help your visitors to get explanations without being redirected to another page. This Tooltip icon is stylish and it's comes with Mouse Hover effect.
So before you add this Tooltip icon on your blog, make sure to take a look of this Tooltip plugin by clicking on the below demo button.
Now if you like this Tooltip plugin and want to install it on your own blog, then follow the below simple instruction.
How to install Simple Tooltip?
At the first, visit to your blogger dashboard - Visit
Go to the "Template" section.
Click on the "Edit Html" button.
Now add the below css code in your template just before ]]></b:skin>.
/* CSS Tooltip */
.help-tip{position:absolute;top:16px;right:16px;text-align:center;background-color:#29b6f6;border-radius:50%;width:24px;height:24px;font-size:12px;line-height:26px;cursor:default;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.help-tip:hover{cursor:pointer;background-color:#ccc}
.help-tip:before{content:'?';font-weight:700;color:#fff}
.help-tip p{visibility:hidden;opacity:0;text-align:left;background-color:#039be5;padding:20px;width:300px;position:absolute;border-radius:4px;right:-4px;color:#fff;font-size:13px;line-height:normal;transform:scale(0.7);transform-origin:100% 0%;transition:all 0.5s cubic-bezier(0.55,0,0.1,1)}
.help-tip:hover p{cursor:default;visibility:visible;opacity:1;transform:scale(1.0)}
.help-tip p:before{position:absolute;content:'';width:0;height:0;border:6px solid transparent;border-bottom-color:#039be5;right:10px;top:-12px}
.help-tip p:after{width:100%;height:40px;content:'';position:absolute;top:-5px;left:0}
.help-tip a{color:#fff;font-weight:700}
.help-tip a:hover,.help-tip a:focus{color:#fff;text-decoration:underline}
Save your template to apply the changes.
After that, add the below HTML code anywhere you want to show this icon. (e.g - in your template, When you write an article, etc..)
<div class="help-tip">
<p>How to create a mouse hover Tooltip icon with Css and Html codes - With the help of this tooltip icon you can explain and inform about your blog.
</p>
</div>
All done! Any problem ask me via the comment section.
That's it! I hope you like this css tooltip icon! Stay tuned for more like this! Thanks for reading +Prince Chaudhri
0 Comment to "How to Add Simple Tooltip with CSS and HTML"
Post a Comment