Another week has passed, here's the challenge post:
Article No Longer Available
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
Article No Longer Available
That's it for last week. Have fun with this week's challenge.
Top comments (0)