Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Create a Pure CSS Tooltip in Blogger

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:

p>This is an example tooltip. Make it only with HTML and CSS. Follow the tutorial here.


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 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.

This post first appeared on AR Blogger Lab, please read the originial post: here

Share the post

How to Create a Pure CSS Tooltip in Blogger


Subscribe to Ar Blogger Lab

Get updates delivered right to your inbox!

Thank you for your subscription