Comments (5)
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 becomesToggletip
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.
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.
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.
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.
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)
- Button with icon only - always shows tooltip HOT 2
- TooltipIcon memory leak HOT 3
- TextInput v11 HOT 4
- PasswordInput v11 HOT 5
- Alphabetize prop names in documentation HOT 5
- Layer (new component) HOT 3
- Use `Button` component instead of native `button` in `HeaderGlobalAction` HOT 1
- Support nested properties in DataTable filtering search HOT 3
- IconButton v11 HOT 1
- DataTable on:click:row is missing target and currentTarget information
- ContextMenu prevents context menu invocations outside of the target HOT 2
- TypeScript cannot find CarbonTheme type when using Theme HOT 5
- `ToastNotification` close event can fire after close due to timeout HOT 1
- Link: do not render `<p>` HOT 2
- Unable to resolve *.js imports HOT 1
- Support minCount in TextArea component HOT 1
- Clean up accessibility warnings
- DataTable sort function return type is restricted to -1, 0 or 1 HOT 2
- Dropdown: typeahead not available
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from carbon-components-svelte.