DEV Community

Cover image for 3 Insanely Simple Steps To DIY Tooltips

3 Insanely Simple Steps To DIY Tooltips

Vishnu Baliga on June 10, 2020

GUIs have made monumental leaps since the inception of the humble Sketchpad. However, it’s the simplest tools that often spruce up your website fro...
Collapse
 
kallmanation profile image
Nathan Kallman

I've started a whole series of CSS-only web design patterns like this. Coincidentally, tooltips was the first installment: dev.to/kallmanation/building-a-too...

Cool to see people thinking the same way; good article!

Collapse
 
vishnubaliga profile image
Vishnu Baliga

Thank you so much! 😊
Looking forward to your upcoming series, good luck with it.

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

You should add focus triggers to show the tooltip as well. It's important to remember that not everyone uses a mouse or similar pointing device. Adding focus triggers makes it more accessible. Test with screen readers though, some might need additional aria-* attributes to read out the tooltip in the most convenient way for the user.

Collapse
 
vishnubaliga profile image
Vishnu Baliga

Thank you for mentioning about a11y, That is an important factor in making web accessibility easier.

Having said that, aria-* can be added directly to the HTML element instead of the tooltip, because here, we are creating a tooltip using CSS alone, without any js overhead.

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

Not all keyboard users are screen reader users, so aria won't help them. For example, somebody with Parkinson's or a broken wrist might be using a keyboard as they struggle with a mouse or similar pointing device. For these users, using focus styles can mean the tooltip is available to them.

Thread Thread
 
vishnubaliga profile image
Vishnu Baliga

I completely agree with you.

It's up to the developer to decide who is the targeted audience, It is very simple to achieve this as well, along with :hover he needs to define :focus as well.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

I think in terms of accessibility, it's not about who we think our target audience is, but about making sure we're not discriminating against people because we thought they aren't our audience. Like you said, simply using :focus to trigger the display of the tooltip should resolve its visibility for those. But there might be some other edge cases where testing with a screen reader should be done too.

Collapse
 
4shub profile image
Shubham Naik • Edited

I would say that you should rename the tooltip-title attribute to data-tooltip-title the general HTML spec doesn't like when sites implement custom attributes that aren't prepended by a data-.

This is because not all browsers work with custom attributes as intended, older browsers might not be able to understand attributes that aren't explicitly defined in the w3c spec unless placed with data-. Placing data- also future proofs browsers as if there is any change in the future where tooltip-title becomes an accepted standard in HTML, this implementation would break.

More information here:
[1] w3.org/TR/2011/WD-html5-20110525/e....

[2] developer.mozilla.org/en-US/docs/W...

Collapse
 
vishnubaliga profile image
Vishnu Baliga

Thank you for pointing that out. As you said, it is always good to use a custom data attribute.

In the DIY examples mentioned above, I wanted to keep it simple and easy to understand. They can always have their own way of defining the attributes.

Collapse
 
waylonwalker profile image
Waylon Walker

spiketip looks really 👌 nice

Collapse
 
vishnubaliga profile image
Vishnu Baliga

Glad you liked it! Thank you so much! 😊