Thinking on ways to solve TOOLTIPS

In today's GUI Challenge, @AdamArgyleInk builds a tooltip with a custom element (no web component!), :has(), transforms, and logical properties. Besides a small backup script for the usage of :has(), it's all CSS powered. Don't miss the screen reader experience, it got some special attention, like usual.

Chapters:
0:00 - Introduction
0:20 - Tooltips vs Toggletips
2:22 - Feature Overview
6:25 - Screen Reader UX
9:06 - Accessibility Tree
14:12 - :has()
14:55 - HTML
15:18 - CSS
18:50 - JavaScript
20:21 - Outro

Resources:

#GUIchallenges #CSS #ChromeDeveloper

[cwirus]

This entire series is just pure gold! So good!

[davidricebowled]

A fantastic video as usual, but the <abbr> element is the "abbreviation" element, not "abridge."

[hgilbert]

Just one extra thing about tooltips, you can add <title> inside SVGs .. to get a tooltip. I did that when I drew a map in SVG. You can place it anywhere inside a shape say <circle><title>your tooltip</title></circle>

[appeltaartnl]

Thanks for another fun video.
Would be cool to see one of these GUI challenges being build as an actual web component, instead of just a custom element. I'm curious to see how you would handle some of the features you've build when scoped styles / shadow roots are introduced into the mix.

[Gearyco]

Testing your code and the triangles don't show up at all. You kind of glossed over how the conic gradient with a mask creates a triangle. And then on top of that the sample code doesn't seem to work so it's impossible to reverse engineer it. Please clarify.

[dyrenh]

Thanks for a great video. Glad you touched on the difference between tooltips and toggle-tips. A few more problems you might like to solve are 1. adapting the tooltip positions responsively and 2. ensuring tooltips are always fully visible (when inside scrolling parent containers or a child of overflow: hidden or near a page edge). I don't think there's any way to avoid a bit of a heavier-handed JS-based approach but would love to see this channel address some of those trickier but often-requested features.

[RafaelCouto]

Great work ... I miss a mention about the title attribute

[saida]

Great video as always. I would suggest using another theme for the VSCode, because it is a bit hard to see all those braces and it makes it hard to easily understand the CSS you have written.

[CirTap]

beautiful and complex as usual :-)
I'd avoid adding a literal "Has tooltip" text to the CSS. Not good for i18n if you have an international audience and would need extra JS for the translation.

[ashish-r]

Really liked the accessibility and implementation part, however there is one issue that is bothering me. Since tooltips are floating elements, and in this approach it is getting attached next to the parent element with absolute positioning, but now the problem is it is possible that the container for all these elements has overflow hidden, in that case our tooltip will be clipped, and it is not the ideal experience.
IMO floating elements should be attached to the body and should be positioned based on the position of the parent element on the screen.

[artemeelemann]

Thanks for the video, unfortunately did not find here a way to adjust tooltip position to fit into browser window, otherwise it gets cut or increases the width which breaks other markup

[bruceb]

This is nice but it does fail WCAG 1.4.13 Content on Hover or Focus because you can't dismiss it without moving pointer hover or keyboard focus and the tooltip itself isn't hoverable with the mouse.

[alubhau]

Is it generally bad to design tooltips with interactive content. I have seen interactive content in vscode tooltips...can anyone give me a few examples where it's bad ux to have interactive content in tooltips and the design would be better with toggle tips instead?

[ilearn]

Bro how ur able to use & operator in normal CSS

[sarapusivasai]

How to localize, the content which you have added in the cast after element.

[merotuts]

How is he able to use <tool-tip> tag in html. He's not even using any UI Component library, can somebody explain ?

[xkons]

Wonderful topic and great execution. I also didn't know about CanvasText yet 🚀 And that homemade short and simple polyfill at the end 🤯

Regarding the "; has tooltip: " text to be announced for screenreaders: One common nitpick I have with text content in CSS content is that it's not simple to use in a multi-language page.

One way I would solve this would be through CSS variables: tool-tip::before { content: }

Have you encountered this requirement before? How would you address it?

[dancovrboski]

Wo znahi ova dami objasnite gogel oti neznam da svatam

[hgilbert]

Did you check on Firefox? It's completely broken on my Firefox 91. The Demo Page that is.

[aram]

1. I like tooltips until they are overused and used for presenting obvious things and the sake of the developer's fun. 2. This presentation is very desktop-centric. You even hovered over emulated page at the beginning. IMO tooltips still do make sense on mobile. We don't have hover there but we can implement tap-and-hold to show. 3. Using css content property for text is unacceptable for translated sites. 4. I like the focus border drawn around the "union" area of trigger and tooltip