DEV Community


CSS Challenges Results #2 | Tooltips

Milan Radojević
Minimalist, an aspiring web dev, comp-sci student, hacker, gamer and a linux enthusiast. I like meeting other nerdy people and seeing what they're doing.
・1 min read

Another week has passed, here's the challenge post:


You could structure the HTML in two ways:

Add the tooltip as a pseudo element

<div class="tooltip" data-tooltip="Tooltip text here">Content</div>
Enter fullscreen mode Exit fullscreen mode

Tooltip as a separate element

<div class="wrapper">
  <!-- content here -->
  <div class="tooltip">Tooltip text here</div>
Enter fullscreen mode Exit fullscreen mode


Tooltips on text

Rose, me, and Edmund Teo Chang Hao all used attr() to add text to tooltips. Rose added the href attribute and I added the data-tooltip attribute to tooltips.

Tooltip on icon

Jacob Quirke and SK both went with icons. SK also added a cool little animation with pulsing circles and a floating pin.

Next challenge

That's it for last week. Have fun with this week's challenge.

Discussion (0)