DEV Community

loading...

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:

The HTML

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>
</div>
Enter fullscreen mode Exit fullscreen mode

Submissions

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)