How to Create a Simple Tooltip in Blogger - This tooltip will help visitors get explanations without being directed to other pages. Simply hover tooltip then explanations will appear.
First, write the markup for the tooltip. Here's an example below:
class="help-tip">
p>This is an example tooltip. Make it only with HTML and CSS. Follow the tutorial here.
p>
/div>
The element will be displayed as a tooltip, and the .help-tip div tag is a blue circle with a question mark in it. When the .help-tip div class has hovered then the contents of the element will be displayed.
So by default, the paragraph or is hidden and will only be visible when hover.
The contents of a paragraph can be anything, text, images, or other HTML.
Use this CSS to create the tooltip:
/* 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}
Good luck.
