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

The HTML

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.

<p>This is a demo showing usage of tooltips.<dfn data-info="I am the hover content">Hover me</dfn></p>

The CSS

   
/* Styling dfn tag to highlight the word with the tooltip */
dfn {
  background: rgba(0,0,0,0.2);
  border-bottom: dashed 1px rgba(0,0,0,0.8);
  padding: 0 0.4em;
  cursor: help;
  font-style: normal;
  position: relative;
  
}
dfn::after {
  content: attr(data-info);
  display: inline;
  position: absolute;
  top: 22px; left: 0;
  opacity: 0;
  width: 230px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5em;
  padding: 0.5em 0.8em;
  background: rgba(0,0,0,0.8);
  color: #fff;
  pointer-events: none; /* This prevents the box from apearing when hovered. */
  transition: opacity 250ms, top 250ms;
}
dfn::before {
  content: '';
  display: block;
  position: absolute;
  top: 12px; left: 20px;
  opacity: 0;
  width: 0; height: 0;
  border: solid transparent 5px;
  border-bottom-color: rgba(0,0,0,0.8);
  transition: opacity 250ms, top 250ms;
}
dfn:hover {z-index: 2;} /* Keeps the info boxes on top of other elements */
dfn:hover::after,
dfn:hover::before {opacity: 1;}
dfn:hover::after {top: 30px;}
dfn:hover::before {top: 20px;}

You may also like

Please share this article on social media.