CSS Challenges Results #2 | Tooltips

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>

Tooltip as a separate element

<div class="wrapper">
  <!-- content here -->
  <div class="tooltip">Tooltip text here</div>
</div>

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.