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.