Show beautiful tooltip on hover with HTML & CSS only

We have recently covered an article on adding image previews for hovered links. In this article, we will see how to add beautiful tooltips to any text or links with some HTML and CSS alone. Tooltips are extremely useful when you want to provide some information or guides to the user. Since there is no JavaScript, it makes the page load faster.

Codepen Demo

See the Pen Info on Hover by Ty Strong (@tystrong) on CodePen.

The HTML

To add a tooltip to your webpage wrap the word with <dfn data-info="hover info"></dfn>. 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

• 10 best online html code editor
• Fast load iframe embeds