Just one extra thing about tooltips, you can add 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 your tooltip
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.
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.
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
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?
Actually, in vs code if you have an error on the 0th character, trying to hover over it to then move the mouse into the tooltip to see the error is near impossible. Takes me like 3 tries anytime it happens.
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.
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.
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.
you're correct, the best overlay is one at the document level that can't be clipped. i'll put out another video when (which offers :top-layer) and CSS anchor() positioning (which will let me keep it in the viewport and never go outside). stay tuned!
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.
Came to say the same thing! Would love to see this implementation with a hover state for the tooltip. I'm waiting for the popover API to add "hint" and for anchor positioning to be baseline. Someday!
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.
you're correct, the best overlay is one at the document level that can't be clipped. i'll put out another video when (which offers :top-layer) and CSS anchor() positioning (which will let me keep it in the viewport and never go outside). stay tuned!
@@merotuts9819 you can make up any tag you want, they're called custom elements. they turn into web components if you want to, but browsers treat any like that as a div essentially. but you can target it with css. like soft components.
p.s. I need to correct myself(after looking at the source code). It should be defined as a web component but it's not. I see no real use case, especially with the fact that You would need to repeat the role attribute on each element. TBH I was shocked that it even worked but is invalid html. I guess it's just used to easily demo only the CSS :shrug:
@@sickodelic1 any element that has a dash in it can be a web component but doesnt have to. the browser will treat it as a div, so tool-tip is just a div with a name i can target with css. it's the difference between custom elements and web components, tool-tip is a custom element. totally valid html.
@@AdamArgyleInk OK it doesn't work on FF 96 and downwards. FF97 and upwards, works. I'd thought it would degrade gracefully for slightly older versions.
@@hgilbert me too, my guess is that those versions dont support supports queries of selectors, like `CSS.supports('selector(:has(*))')` is doing. that would make the entire block not run.
@@AdamArgyleInk which is why before I would always test a site with javascript turned off. Make sure the site non-JS version is as accessible / readable as possible. Or at least gracefully degrades. But many people say what is the point? Nobody surfs the net with JS switched off anymore. I found it works as an insurance.
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: var(--translated-has-tooltip-prefix); } Have you encountered this requirement before? How would you address it?
excellent consideration! i would use css variables for that yep, or my rendering framework to pass in the text on render. then depends if rendering is client side or server side, but yeah, those would be my strategies. thanks for sharing the thought!
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
The goal of a screenreader voice isn't to sound as perfectly human as possible, it's to allow its user to consume the content as quickly as possible. Screenreader users usually have the speed set much faster than human speech, and the robot-sounding voice is much more distinguishable at these speeds.
![ประสบการณ์ จ้าง Developer ที่ผมจะไม่มีวันลืม [ภาค2]](http://i.ytimg.com/vi/pZbsSDRrmXA/mqdefault.jpg)
![[LIVE] : ONE ลุมพินี 91 | คู่เอก "คมอาวุธ vs อเล็กเซย์"](http://i.ytimg.com/vi/V0RkEfYFsgM/mqdefault.jpg)
Subscribe for the latest → goo.gle/ChromeDevs
This entire series is just pure gold! So good!
A fantastic video as usual, but the element is the "abbreviation" element, not "abridge."
totally heh! ty
Just one extra thing about tooltips, you can add 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 your tooltip
Oh and you can also do that in HTML, with the "title" attribute:
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.
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.
Excellent stuff as always
Great work ... I miss a mention about the title attribute
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
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?
Actually, in vs code if you have an error on the 0th character, trying to hover over it to then move the mouse into the tooltip to see the error is near impossible. Takes me like 3 tries anytime it happens.
we love you adam!!!!
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.
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.
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.
you're correct, the best overlay is one at the document level that can't be clipped. i'll put out another video when (which offers :top-layer) and CSS anchor() positioning (which will let me keep it in the viewport and never go outside). stay tuned!
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.
Came to say the same thing! Would love to see this implementation with a hover state for the tooltip. I'm waiting for the popover API to add "hint" and for anchor positioning to be baseline. Someday!
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.
you're correct, the best overlay is one at the document level that can't be clipped. i'll put out another video when (which offers :top-layer) and CSS anchor() positioning (which will let me keep it in the viewport and never go outside). stay tuned!
@@AdamArgyleInk thanks, waiting for the same!
How to localize , the content which you have added in the cast after element.
:lang() could be helpful here!
Bro how ur able to use & operator in normal CSS
@@AdamArgyleInk also what is tag ? Where did it come from ?
@@merotuts9819 you can make up any tag you want, they're called custom elements. they turn into web components if you want to, but browsers treat any like that as a div essentially. but you can target it with css. like soft components.
Wo znahi ova dami objasnite gogel oti neznam da svatam
How is he able to use tag in html. He's not even using any UI Component library, can somebody explain ?
p.s. I need to correct myself(after looking at the source code). It should be defined as a web component but it's not. I see no real use case, especially with the fact that You would need to repeat the role attribute on each element. TBH I was shocked that it even worked but is invalid html. I guess it's just used to easily demo only the CSS :shrug:
@@sickodelic1 any element that has a dash in it can be a web component but doesnt have to. the browser will treat it as a div, so tool-tip is just a div with a name i can target with css. it's the difference between custom elements and web components, tool-tip is a custom element. totally valid html.
@@AdamArgyleInk Wow. Thnx for clarifying that. Never knew it was possible
Impressive
Did you check on Firefox? It's completely broken on my Firefox 91. The Demo Page that is.
def checked on firefox, and just double checked. it does require the js to run to polyfill the :has() expectation. which FF version?
@@AdamArgyleInk 91.7.0esr (64-bit) .. I will have a quick look at some FF versions I still have a few days left with an Browser Emulator Service.
@@AdamArgyleInk OK it doesn't work on FF 96 and downwards. FF97 and upwards, works. I'd thought it would degrade gracefully for slightly older versions.
@@hgilbert me too, my guess is that those versions dont support supports queries of selectors, like `CSS.supports('selector(:has(*))')` is doing. that would make the entire block not run.
@@AdamArgyleInk which is why before I would always test a site with javascript turned off. Make sure the site non-JS version is as accessible / readable as possible. Or at least gracefully degrades. But many people say what is the point? Nobody surfs the net with JS switched off anymore. I found it works as an insurance.
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: var(--translated-has-tooltip-prefix); }
Have you encountered this requirement before? How would you address it?
excellent consideration! i would use css variables for that yep, or my rendering framework to pass in the text on render. then depends if rendering is client side or server side, but yeah, those would be my strategies. thanks for sharing the thought!
@@AdamArgyleInk Isn't it possible to use the :lang() pseudo class for this?
@@vincentjacquet2927 good call, seems like a great use case for :lang()
Interesting google is also using vite
vite rocks
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
Why is the screen reader so bad, lol? Even those TikTok cringe text-to-speech readers are way ahead of this 1989-sounding robot voice
The goal of a screenreader voice isn't to sound as perfectly human as possible, it's to allow its user to consume the content as quickly as possible. Screenreader users usually have the speed set much faster than human speech, and the robot-sounding voice is much more distinguishable at these speeds.
@@jakearchibald oh wow that's interesting. I'm sorry of my comment came off insensitive or anything. Thank you.
Are you sure of the need to use will-change? Shouldn't it be used only as a last resort?
fixes Safari...... otherwise yeah, not needed. i tried not to call them out in the vid
@@AdamArgyleInk “fixes Safari” boy if I had a nickel for every time… 😉