How to Create Pure CSS Tooltip on Blogger

How to Make a Simple Tooltip on Blogger - This tooltip will help visitors get explanations without being directed to another page. Simply hover the tooltip then explanations will appear.

First write the markup for the tooltip. Here's an example below:

<div class="help-tip">
<p>This is an example of a tooltip. Make it only with HTML and CSS. Follow the tutorial here.
</p>
</div>

The <p> 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 div class .help-tip is hovered then the contents in the <p> element will be displayed. So by default the paragraph or <p> is hidden and will only be visible during hover. Paragraph content can be anything, text, image, or other HTML.

/* 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}

• Link Demo

Good luck.