How To Add A Text Tooltip In Divi Using Pure HTML & CSS

Tooltips are in again! There are many benefits to using tooltips in your design. But they do have some limitations and there are important considerations that should be made in your UX/UI designs.

Benefits of using tooltips

• Hide long text
• Help guide users (ex. “click here for more”)
• Supplement important information
• Condenses
• Look good
• Interactive user experience

Drawbacks of using tooltips

• Not mobile-friendly
• Difficult to interact with on mobile
• Can be jumpy
• Difficult to make responsive
• Hard to get perfectly aligned with the text

.dm-code-snippet.dark {
  background: $default-bg;
  padding: 40px 35px 45px 35px;
  margin: 30px 0;
}

See the Pen Tooltip Normal by Mat Israelson (@mimat) on CodePen.