Thinking on ways to solve TOOLTIPS

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 ธ.ค. 2024

ความคิดเห็น • 53

  • @ChromeDevs
    @ChromeDevs  2 ปีที่แล้ว +16

    Subscribe for the latest → goo.gle/ChromeDevs

  • @cwirus99
    @cwirus99 2 ปีที่แล้ว +20

    This entire series is just pure gold! So good!

  • @davidricebowled
    @davidricebowled 2 ปีที่แล้ว +13

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

  • @hgilbert
    @hgilbert 2 ปีที่แล้ว +3

    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
      @_tr11 2 ปีที่แล้ว +1

      Oh and you can also do that in HTML, with the "title" attribute:

  • @appeltaartnl
    @appeltaartnl 2 ปีที่แล้ว +5

    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
    @Gearyco ปีที่แล้ว +1

    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.

  • @DaveCollison
    @DaveCollison 2 ปีที่แล้ว +2

    Excellent stuff as always

  • @RafaelCouto
    @RafaelCouto 2 ปีที่แล้ว +1

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

  • @artemeelemann317
    @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

  • @alubhau
    @alubhau 2 ปีที่แล้ว +2

    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
      @dave6012 2 ปีที่แล้ว

      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
    @swyxTV 2 ปีที่แล้ว +2

    we love you adam!!!!

  • @saida6886
    @saida6886 11 หลายเดือนก่อน

    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
    @CirTap 2 ปีที่แล้ว +3

    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.

  • @dyrenh
    @dyrenh 2 ปีที่แล้ว +1

    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
      @AdamArgyleInk 2 ปีที่แล้ว

      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!

  • @bruceb6441
    @bruceb6441 2 ปีที่แล้ว +1

    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
      @carylwyatt3058 4 หลายเดือนก่อน

      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!

  • @ashish-r
    @ashish-r 2 ปีที่แล้ว +1

    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
      @AdamArgyleInk 2 ปีที่แล้ว +1

      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
      @ashish-r 2 ปีที่แล้ว

      @@AdamArgyleInk thanks, waiting for the same!

  • @sarapusivasai2957
    @sarapusivasai2957 2 ปีที่แล้ว

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

    • @AdamArgyleInk
      @AdamArgyleInk 2 ปีที่แล้ว

      :lang() could be helpful here!

  • @ilearn9122
    @ilearn9122 2 ปีที่แล้ว +2

    Bro how ur able to use & operator in normal CSS

    • @merotuts9819
      @merotuts9819 2 ปีที่แล้ว +1

      @@AdamArgyleInk also what is tag ? Where did it come from ?

    • @AdamArgyleInk
      @AdamArgyleInk 2 ปีที่แล้ว +1

      @@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.

  • @dancovrboski9135
    @dancovrboski9135 2 ปีที่แล้ว

    Wo znahi ova dami objasnite gogel oti neznam da svatam

  • @merotuts9819
    @merotuts9819 2 ปีที่แล้ว

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

    • @sickodelic1
      @sickodelic1 2 ปีที่แล้ว

      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
      @AdamArgyleInk 2 ปีที่แล้ว +1

      @@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
      @sickodelic1 2 ปีที่แล้ว +1

      @@AdamArgyleInk Wow. Thnx for clarifying that. Never knew it was possible

  • @0xedb
    @0xedb 2 ปีที่แล้ว +1

    Impressive

  • @hgilbert
    @hgilbert 2 ปีที่แล้ว +1

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

    • @AdamArgyleInk
      @AdamArgyleInk 2 ปีที่แล้ว

      def checked on firefox, and just double checked. it does require the js to run to polyfill the :has() expectation. which FF version?

    • @hgilbert
      @hgilbert 2 ปีที่แล้ว

      @@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
      @hgilbert 2 ปีที่แล้ว

      @@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
      @AdamArgyleInk 2 ปีที่แล้ว

      @@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
      @hgilbert 2 ปีที่แล้ว

      @@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.

  • @xkons
    @xkons 2 ปีที่แล้ว

    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
      @AdamArgyleInk 2 ปีที่แล้ว

      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
      @vincentjacquet2927 2 ปีที่แล้ว

      @@AdamArgyleInk Isn't it possible to use the :lang() pseudo class for this?

    • @AdamArgyleInk
      @AdamArgyleInk 2 ปีที่แล้ว

      @@vincentjacquet2927 good call, seems like a great use case for :lang()

  • @rajaasim4474
    @rajaasim4474 2 ปีที่แล้ว +1

    Interesting google is also using vite

  • @aram5642
    @aram5642 2 ปีที่แล้ว +1

    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
    @kerimgueney 2 ปีที่แล้ว +1

    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
      @jakearchibald 2 ปีที่แล้ว +4

      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
      @kerimgueney 2 ปีที่แล้ว +2

      @@jakearchibald oh wow that's interesting. I'm sorry of my comment came off insensitive or anything. Thank you.

  • @aleksander5298
    @aleksander5298 2 ปีที่แล้ว

    Are you sure of the need to use will-change? Shouldn't it be used only as a last resort?

    • @AdamArgyleInk
      @AdamArgyleInk 2 ปีที่แล้ว +2

      fixes Safari...... otherwise yeah, not needed. i tried not to call them out in the vid

    • @dave6012
      @dave6012 2 ปีที่แล้ว

      @@AdamArgyleInk “fixes Safari” boy if I had a nickel for every time… 😉