Giter Club home page Giter Club logo

Comments (5)

brunnerh avatar brunnerh commented on June 6, 2024 1

I would not use anything that hasn't been in all major browsers at least half a year, no matter how long it takes. One year would be even better. Also, the main issue is often Safari because its updates are bound to the OS, which is just plain horrible; the update cadence is low and on older OS versions you may not even be able to get the latest Safari at all.

Regarding hover, I don't think Popover should deal with that, it's a primitive on which Tooltip builds. So the composition of components is usually:

Button/Inputs > Tooltip > Popover

In v11 there are changes to tooltips that need to be addressed:

  • What is Tooltip in v10 becomes Toggletip which opens on click and may contain interactive content
  • Tooltip is for those smaller texts, opens on hover/focus and may not contain interactive content

Note from spec:

v11 update: The tooltip component has been refactored to use the popover component under the hood to improve accessibility. Interactive tooltips now use the toggletip component to achieve accessibility standards. For v10 implementation guidance, see the v10 tooltip.

In the React version, Tooltip provides the automatic open/close logic with optional timing properties:

  enterDelayMs = 100,
  leaveDelayMs = 300,

from carbon-components-svelte.

theetrain avatar theetrain commented on June 6, 2024 1

All good points. As a side note, it would be great if we could test attributes and CSS features in Playwright with a browserslist file for compatibility.

I updated the criteria above. Ideally, most of this is achievable with CSS, but the styles provided may not already work that way. Here's a handy guide: https://inclusive-components.design/tooltips-toggletips/

aria-describedby should be all that's needed to announce the tooltip content with its corresponding action like an icon button.

from carbon-components-svelte.

SimpleProgrammingAU avatar SimpleProgrammingAU commented on June 6, 2024

If this one is blocking PasswordInput from being progressed, I may as well take this one on so that I can go back and finish PasswordInput afterwards.

Happy to give it a crack with the Popover API. Have been wanting an excuse to have a proper look at it anyway.

from carbon-components-svelte.

brunnerh avatar brunnerh commented on June 6, 2024

I'm opposed to using the popover API, it's not even in Firefox yet (only nightly).
Also it does not open on hover, so in many places JS will be needed anyway.

from carbon-components-svelte.

SimpleProgrammingAU avatar SimpleProgrammingAU commented on June 6, 2024

it's not even in Firefox yet

It's been in every other major browser since September 2023. How long is reasonable to wait for Mozilla to catch up? (genuine question)

it does not open on hover

I think we could add a hover prop that could enable open on hover to avoid the need for users to write their own Javascript whenever they want to use a Popover with hover. What do you think?

from carbon-components-svelte.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.