DEV Community

loading...

CSS Challenges Results #2 | Tooltips

mikister profile image Milan Radojević ・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)

pic
Editor guide