A fantastic video as usual, but the element is the "abbreviation" element, not "abridge."
@AdamArgyleInk
Жыл бұрын
totally heh! ty
@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.
@hgilbert
Жыл бұрын
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
@_tr11
Жыл бұрын
Oh and you can also do that in HTML, with the "title" attribute:
@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.
@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.
@saida6886
8 ай бұрын
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.
@DaveCollison
Жыл бұрын
Excellent stuff as always
@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?
@dave6012
Жыл бұрын
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.
@swyxTV
Жыл бұрын
we love you adam!!!!
@RafaelCouto
Жыл бұрын
Great work ... I miss a mention about the title attribute
@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.
@AdamArgyleInk
Жыл бұрын
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!
@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.
@AdamArgyleInk
Жыл бұрын
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!
@ashish-r
Жыл бұрын
@@AdamArgyleInk thanks, waiting for the same!
@artemeelemann317
Жыл бұрын
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
@bruceb6441
Жыл бұрын
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.
@carylwyatt3058
Ай бұрын
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!
@ilearn9122
Жыл бұрын
Bro how ur able to use & operator in normal CSS
@merotuts9819
Жыл бұрын
@@AdamArgyleInk also what is tag ? Where did it come from ?
@AdamArgyleInk
Жыл бұрын
@@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.
@0xedb
Жыл бұрын
Impressive
@sarapusivasai2957
Жыл бұрын
How to localize , the content which you have added in the cast after element.
@AdamArgyleInk
Жыл бұрын
:lang() could be helpful here!
@merotuts9819
Жыл бұрын
How is he able to use tag in html. He's not even using any UI Component library, can somebody explain ?
@sickodelic1
Жыл бұрын
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:
@AdamArgyleInk
Жыл бұрын
@@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.
@sickodelic1
Жыл бұрын
@@AdamArgyleInk Wow. Thnx for clarifying that. Never knew it was possible
@dancovrboski9135
Жыл бұрын
Wo znahi ova dami objasnite gogel oti neznam da svatam
@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: var(--translated-has-tooltip-prefix); } Have you encountered this requirement before? How would you address it?
@AdamArgyleInk
Жыл бұрын
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!
@vincentjacquet2927
Жыл бұрын
@@AdamArgyleInk Isn't it possible to use the :lang() pseudo class for this?
@AdamArgyleInk
Жыл бұрын
@@vincentjacquet2927 good call, seems like a great use case for :lang()
@rajaasim4474
Жыл бұрын
Interesting google is also using vite
@AdamArgyleInk
Жыл бұрын
vite rocks
@hgilbert
Жыл бұрын
Did you check on Firefox? It's completely broken on my Firefox 91. The Demo Page that is.
@AdamArgyleInk
Жыл бұрын
def checked on firefox, and just double checked. it does require the js to run to polyfill the :has() expectation. which FF version?
@hgilbert
Жыл бұрын
@@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.
@hgilbert
Жыл бұрын
@@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.
@AdamArgyleInk
Жыл бұрын
@@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.
@hgilbert
Жыл бұрын
@@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.
@aram5642
Жыл бұрын
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
@kerimgueney
Жыл бұрын
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
@jakearchibald
Жыл бұрын
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.
@kerimgueney
Жыл бұрын
@@jakearchibald oh wow that's interesting. I'm sorry of my comment came off insensitive or anything. Thank you.
@aleksander5298
Жыл бұрын
Are you sure of the need to use will-change? Shouldn't it be used only as a last resort?
@AdamArgyleInk
Жыл бұрын
fixes Safari...... otherwise yeah, not needed. i tried not to call them out in the vid
@dave6012
Жыл бұрын
@@AdamArgyleInk “fixes Safari” boy if I had a nickel for every time… 😉
Пікірлер: 53