Show beautiful tooltip on hover with HTML & CSS only

WE have recently covered an article on how to add image previews for hovered links. That was cool and more importantly it improved the user experience. In this post we are discussing another great feature that shows tooltip for texts or links or whatever .  To implement it, all you need to do is add some HTML tags to and some CSS. There is no need for javascript thereby  makes the page load faster.
See the codepen demo by clicking the image below.

Codepen Demo

Click the image below to load the demo.This demo was created using HTML5 on-click load iframe generator


To add a tooltip to your webpage wrap the word with <dfn data-info=”hover info”></dfn> tag. The dfn tag is used to mark the defining instance of a term. Learn more about dfn tag here.



  You may also like

Please share this article on social media.



  • Jason Lee

    thank you!! i’m using this for my squarespace site and wanted to copy how they do it on their support page

  • Is there anyway to be able to add a hyperlink to the tooltip?

  • I love this! is there anyway to add a photo to the tooltip pop-up instead of just a definition?

Follow Us

Don't be shy, get in touch. We love meeting interesting people and making new friends.