Grokking CSS for Web Development
Vote

0% completed

​

Create a CSS Tooltip Using Pseudo-Elements

An element with a width and height of 0 can still draw a triangle on the screen, as long as it has a thick border. This challenge uses that fact for the small arrow of a tooltip, and it builds the rest of the tooltip from the ::before and ::after pseudo-elements, with no extra HTML elements.

The requirements

  • Show a tooltip when the user hovers over an element.
  • Draw the tooltip with the ::before and ::after pseudo-elements.
  • Read the tooltip text from a custom data attribute.
  • Include an arrow that points toward the element.
  • Fade the tooltip in smoothly.

.....

.....

.....

Like the course? Get enrolled and start learning!

Reading Progress

0%

Vote for new content