how2ice/react-test
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

init project
Some checks failed
No response / noResponse (push) Has been cancelled
Details
CI / Continuous releases (push) Has been cancelled
Details
CI / test-dev (macos-latest) (push) Has been cancelled
Details
CI / test-dev (ubuntu-latest) (push) Has been cancelled
Details
CI / test-dev (windows-latest) (push) Has been cancelled
Details
Maintenance / main (push) Has been cancelled
Details
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
Details
CodeQL / Analyze (push) Has been cancelled
Details

Browse Source
This commit is contained in:
how2ice
2025-12-12 14:26:25 +09:00
commit 005cf56baf
43188 changed files with 1079531 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/data/joy/components/tooltip/AccessibilityTooltip.js Normal file
View File

@@ -0,0 +1,20 @@
import DeleteIcon from '@mui/icons-material/Delete';
import Button from '@mui/joy/Button';
import IconButton from '@mui/joy/IconButton';
import Tooltip from '@mui/joy/Tooltip';
import Box from '@mui/joy/Box';
export default function AccessibilityTooltip() {
return (
<Box sx={{ display: 'flex', gap: 2, width: '100%', justifyContent: 'center' }}>
<Tooltip title="Delete">
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
<Tooltip describeChild title="Does not add if it already exists.">
<Button>Add</Button>
</Tooltip>
</Box>
);
}

20
docs/data/joy/components/tooltip/AccessibilityTooltip.tsx Normal file
View File

@@ -0,0 +1,20 @@
import DeleteIcon from '@mui/icons-material/Delete';
import Button from '@mui/joy/Button';
import IconButton from '@mui/joy/IconButton';
import Tooltip from '@mui/joy/Tooltip';
import Box from '@mui/joy/Box';
export default function AccessibilityTooltip() {
return (
<Box sx={{ display: 'flex', gap: 2, width: '100%', justifyContent: 'center' }}>
<Tooltip title="Delete">
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
<Tooltip describeChild title="Does not add if it already exists.">
<Button>Add</Button>
</Tooltip>
</Box>
);
}

8
docs/data/joy/components/tooltip/AccessibilityTooltip.tsx.preview Normal file
View File

@@ -0,0 +1,8 @@
<Tooltip title="Delete">
<IconButton>
<DeleteIcon />
</IconButton>
</Tooltip>
<Tooltip describeChild title="Does not add if it already exists.">
<Button>Add</Button>
</Tooltip>

13
docs/data/joy/components/tooltip/ArrowTooltips.js Normal file
View File

@@ -0,0 +1,13 @@
import Button from '@mui/joy/Button';
import Sheet from '@mui/joy/Sheet';
import Tooltip from '@mui/joy/Tooltip';
export default function ArrowTooltips() {
return (
<Sheet sx={{ pr: 7 }}>
<Tooltip title="Add" arrow open placement="right">
<Button variant="plain">Arrow</Button>
</Tooltip>
</Sheet>
);
}

13
docs/data/joy/components/tooltip/ArrowTooltips.tsx Normal file
View File

@@ -0,0 +1,13 @@
import Button from '@mui/joy/Button';
import Sheet from '@mui/joy/Sheet';
import Tooltip from '@mui/joy/Tooltip';
export default function ArrowTooltips() {
return (
<Sheet sx={{ pr: 7 }}>
<Tooltip title="Add" arrow open placement="right">
<Button variant="plain">Arrow</Button>
</Tooltip>
</Sheet>
);
}

5
docs/data/joy/components/tooltip/ArrowTooltips.tsx.preview Normal file
View File

@@ -0,0 +1,5 @@
<Sheet sx={{ pr: 7 }}>
<Tooltip title="Add" arrow open placement="right">
<Button variant="plain">Arrow</Button>
</Tooltip>
</Sheet>

71
docs/data/joy/components/tooltip/GitHubTooltip.js Normal file
View File

@@ -0,0 +1,71 @@
import Box from '@mui/joy/Box';
import Tooltip from '@mui/joy/Tooltip';
import Typography from '@mui/joy/Typography';
import Link from '@mui/joy/Link';
import Chip from '@mui/joy/Chip';
import AdjustIcon from '@mui/icons-material/Adjust';
export default function GitHubTooltip() {
return (
<Tooltip
placement="top-end"
variant="outlined"
arrow
title={
<Box
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: 320,
justifyContent: 'center',
p: 1,
}}
>
<Typography
textColor="grey"
startDecorator={
<Link
underline="always"
href="#common-examples"
color="neutral"
sx={{ fontSize: 'sm' }}
>
mui/material-ui
</Link>
}
sx={{ fontSize: 'sm' }}
>
on Feb 25
</Typography>
<Box sx={{ display: 'flex', gap: 1, width: '100%', mt: 1 }}>
<AdjustIcon color="success" />
<div>
<Typography sx={{ fontWeight: 'lg', fontSize: 'sm' }}>
[system] grey is no more recognized as color with the sx prop
</Typography>
<Typography textColor="text.secondary" sx={{ fontSize: 'sm', mb: 1 }}>
Duplicates I have searched the existing issues Latest version I have
tested the …
</Typography>
<Chip size="sm" color="danger" sx={{ fontWeight: 'lg' }}>
bug 🐛
</Chip>
<Chip size="sm" color="primary" sx={{ ml: 1, fontWeight: 'lg' }}>
package: system
</Chip>
</div>
</Box>
</Box>
}
>
<Link
href="#common-examples"
underline="none"
startDecorator={<AdjustIcon color="success" />}
sx={{ fontWeight: 'lg' }}
>
[system] grey is no more recognized as color with the sx prop
</Link>
</Tooltip>
);
}

71
docs/data/joy/components/tooltip/GitHubTooltip.tsx Normal file
View File

@@ -0,0 +1,71 @@
import Box from '@mui/joy/Box';
import Tooltip from '@mui/joy/Tooltip';
import Typography from '@mui/joy/Typography';
import Link from '@mui/joy/Link';
import Chip from '@mui/joy/Chip';
import AdjustIcon from '@mui/icons-material/Adjust';
export default function GitHubTooltip() {
return (
<Tooltip
placement="top-end"
variant="outlined"
arrow
title={
<Box
sx={{
display: 'flex',
flexDirection: 'column',
maxWidth: 320,
justifyContent: 'center',
p: 1,
}}
>
<Typography
textColor="grey"
startDecorator={
<Link
underline="always"
href="#common-examples"
color="neutral"
sx={{ fontSize: 'sm' }}
>
mui/material-ui
</Link>
}
sx={{ fontSize: 'sm' }}
>
on Feb 25
</Typography>
<Box sx={{ display: 'flex', gap: 1, width: '100%', mt: 1 }}>
<AdjustIcon color="success" />
<div>
<Typography sx={{ fontWeight: 'lg', fontSize: 'sm' }}>
[system] grey is no more recognized as color with the sx prop
</Typography>
<Typography textColor="text.secondary" sx={{ fontSize: 'sm', mb: 1 }}>
Duplicates I have searched the existing issues Latest version I have
tested the …
</Typography>
<Chip size="sm" color="danger" sx={{ fontWeight: 'lg' }}>
bug 🐛
</Chip>
<Chip size="sm" color="primary" sx={{ ml: 1, fontWeight: 'lg' }}>
package: system
</Chip>
</div>
</Box>
</Box>
}
>
<Link
href="#common-examples"
underline="none"
startDecorator={<AdjustIcon color="success" />}
sx={{ fontWeight: 'lg' }}
>
[system] grey is no more recognized as color with the sx prop
</Link>
</Tooltip>
);
}

69
docs/data/joy/components/tooltip/PositionedTooltips.js Normal file
View File

@@ -0,0 +1,69 @@
import Box from '@mui/joy/Box';
import Grid from '@mui/material/Grid';
import Button from '@mui/joy/Button';
import Tooltip from '@mui/joy/Tooltip';
export default function PositionedTooltips() {
return (
<Box sx={{ width: 500 }}>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid>
<Tooltip title="Add" placement="top-start">
<Button variant="plain">top-start</Button>
</Tooltip>
<Tooltip title="Add" placement="top">
<Button variant="plain">top</Button>
</Tooltip>
<Tooltip title="Add" placement="top-end">
<Button variant="plain">top-end</Button>
</Tooltip>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid size={6}>
<Tooltip title="Add" placement="left-start">
<Button variant="plain">left-start</Button>
</Tooltip>
<br />
<Tooltip title="Add" placement="left">
<Button variant="plain">left</Button>
</Tooltip>
<br />
<Tooltip title="Add" placement="left-end">
<Button variant="plain">left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button variant="plain">right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button variant="plain">right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button variant="plain">right-end</Button>
</Tooltip>
</Grid>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid>
<Tooltip title="Add" placement="bottom-start">
<Button variant="plain">bottom-start</Button>
</Tooltip>
<Tooltip title="Add" placement="bottom">
<Button variant="plain">bottom</Button>
</Tooltip>
<Tooltip title="Add" placement="bottom-end">
<Button variant="plain">bottom-end</Button>
</Tooltip>
</Grid>
</Grid>
</Box>
);
}

69
docs/data/joy/components/tooltip/PositionedTooltips.tsx Normal file
View File

@@ -0,0 +1,69 @@
import Box from '@mui/joy/Box';
import Grid from '@mui/material/Grid';
import Button from '@mui/joy/Button';
import Tooltip from '@mui/joy/Tooltip';
export default function PositionedTooltips() {
return (
<Box sx={{ width: 500 }}>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid>
<Tooltip title="Add" placement="top-start">
<Button variant="plain">top-start</Button>
</Tooltip>
<Tooltip title="Add" placement="top">
<Button variant="plain">top</Button>
</Tooltip>
<Tooltip title="Add" placement="top-end">
<Button variant="plain">top-end</Button>
</Tooltip>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid size={6}>
<Tooltip title="Add" placement="left-start">
<Button variant="plain">left-start</Button>
</Tooltip>
<br />
<Tooltip title="Add" placement="left">
<Button variant="plain">left</Button>
</Tooltip>
<br />
<Tooltip title="Add" placement="left-end">
<Button variant="plain">left-end</Button>
</Tooltip>
</Grid>
<Grid container direction="column" sx={{ alignItems: 'flex-end' }} size={6}>
<Grid>
<Tooltip title="Add" placement="right-start">
<Button variant="plain">right-start</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right">
<Button variant="plain">right</Button>
</Tooltip>
</Grid>
<Grid>
<Tooltip title="Add" placement="right-end">
<Button variant="plain">right-end</Button>
</Tooltip>
</Grid>
</Grid>
</Grid>
<Grid container sx={{ justifyContent: 'center' }}>
<Grid>
<Tooltip title="Add" placement="bottom-start">
<Button variant="plain">bottom-start</Button>
</Tooltip>
<Tooltip title="Add" placement="bottom">
<Button variant="plain">bottom</Button>
</Tooltip>
<Tooltip title="Add" placement="bottom-end">
<Button variant="plain">bottom-end</Button>
</Tooltip>
</Grid>
</Grid>
</Box>
);
}

78
docs/data/joy/components/tooltip/TooltipColors.js Normal file
View File

@@ -0,0 +1,78 @@
import * as React from 'react';
import Button from '@mui/joy/Button';
import Tooltip from '@mui/joy/Tooltip';
import Box from '@mui/joy/Box';
import Radio from '@mui/joy/Radio';
import RadioGroup from '@mui/joy/RadioGroup';
import Sheet from '@mui/joy/Sheet';
import Typography from '@mui/joy/Typography';
export default function TooltipColors() {
const [variant, setVariant] = React.useState('solid');
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
<Box
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(3, minmax(150px, 1fr))',
gap: 1,
}}
>
<Tooltip title="Delete" color="primary" placement="top" variant={variant}>
<Button variant="plain" color="primary">
Primary
</Button>
</Tooltip>
<Tooltip title="Delete" color="neutral" placement="top" variant={variant}>
<Button variant="plain" color="neutral">
Neutral
</Button>
</Tooltip>
<Tooltip title="Delete" color="danger" placement="top" variant={variant}>
<Button variant="plain" color="danger">
Danger
</Button>
</Tooltip>
<Tooltip title="Delete" color="success" variant={variant}>
<Button variant="plain" color="success">
Success
</Button>
</Tooltip>
<Tooltip title="Delete" color="warning" variant={variant}>
<Button variant="plain" color="warning">
Warning
</Button>
</Tooltip>
</Box>
<Sheet
sx={{
background: 'transparent',
pl: 4,
borderLeft: '1px solid',
borderColor: 'divider',
}}
>
<Typography
level="body-sm"
id="variant-label"
textColor="text.primary"
sx={{ fontWeight: 'xl', mb: 1 }}
>
Variant:
</Typography>
<RadioGroup
size="sm"
aria-labelledby="variant-label"
name="variant"
value={variant}
onChange={(event) => setVariant(event.target.value)}
>
<Radio label="Solid" value="solid" />
<Radio label="Soft" value="soft" />
<Radio label="Outlined" value="outlined" />
<Radio label="Plain" value="plain" />
</RadioGroup>
</Sheet>
</Box>
);
}

79
docs/data/joy/components/tooltip/TooltipColors.tsx Normal file
View File

@@ -0,0 +1,79 @@
import * as React from 'react';
import Button from '@mui/joy/Button';
import Tooltip from '@mui/joy/Tooltip';
import Box from '@mui/joy/Box';
import Radio from '@mui/joy/Radio';
import RadioGroup from '@mui/joy/RadioGroup';
import Sheet from '@mui/joy/Sheet';
import Typography from '@mui/joy/Typography';
import { VariantProp } from '@mui/joy/styles';
export default function TooltipColors() {
const [variant, setVariant] = React.useState<VariantProp>('solid');
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
<Box
sx={{
display: 'grid',
gridTemplateColumns: 'repeat(3, minmax(150px, 1fr))',
gap: 1,
}}
>
<Tooltip title="Delete" color="primary" placement="top" variant={variant}>
<Button variant="plain" color="primary">
Primary
</Button>
</Tooltip>
<Tooltip title="Delete" color="neutral" placement="top" variant={variant}>
<Button variant="plain" color="neutral">
Neutral
</Button>
</Tooltip>
<Tooltip title="Delete" color="danger" placement="top" variant={variant}>
<Button variant="plain" color="danger">
Danger
</Button>
</Tooltip>
<Tooltip title="Delete" color="success" variant={variant}>
<Button variant="plain" color="success">
Success
</Button>
</Tooltip>
<Tooltip title="Delete" color="warning" variant={variant}>
<Button variant="plain" color="warning">
Warning
</Button>
</Tooltip>
</Box>
<Sheet
sx={{
background: 'transparent',
pl: 4,
borderLeft: '1px solid',
borderColor: 'divider',
}}
>
<Typography
level="body-sm"
id="variant-label"
textColor="text.primary"
sx={{ fontWeight: 'xl', mb: 1 }}
>
Variant:
</Typography>
<RadioGroup
size="sm"
aria-labelledby="variant-label"
name="variant"
value={variant}
onChange={(event) => setVariant(event.target.value as VariantProp)}
>
<Radio label="Solid" value="solid" />
<Radio label="Soft" value="soft" />
<Radio label="Outlined" value="outlined" />
<Radio label="Plain" value="plain" />
</RadioGroup>
</Sheet>
</Box>
);
}

19
docs/data/joy/components/tooltip/TooltipSizes.js Normal file
View File

@@ -0,0 +1,19 @@
import Box from '@mui/joy/Box';
import Tooltip from '@mui/joy/Tooltip';
import Button from '@mui/joy/Button';
export default function TooltipSizes() {
return (
<Box sx={{ display: 'flex', gap: 4, width: '100%', justifyContent: 'center' }}>
<Tooltip title="Delete" size="sm">
<Button variant="plain">Small</Button>
</Tooltip>
<Tooltip title="Delete" size="md">
<Button variant="plain">Medium</Button>
</Tooltip>
<Tooltip title="Delete" size="lg">
<Button variant="plain">Large</Button>
</Tooltip>
</Box>
);
}

19
docs/data/joy/components/tooltip/TooltipSizes.tsx Normal file
View File

@@ -0,0 +1,19 @@
import Box from '@mui/joy/Box';
import Tooltip from '@mui/joy/Tooltip';
import Button from '@mui/joy/Button';
export default function TooltipSizes() {
return (
<Box sx={{ display: 'flex', gap: 4, width: '100%', justifyContent: 'center' }}>
<Tooltip title="Delete" size="sm">
<Button variant="plain">Small</Button>
</Tooltip>
<Tooltip title="Delete" size="md">
<Button variant="plain">Medium</Button>
</Tooltip>
<Tooltip title="Delete" size="lg">
<Button variant="plain">Large</Button>
</Tooltip>
</Box>
);
}

9
docs/data/joy/components/tooltip/TooltipSizes.tsx.preview Normal file
View File

@@ -0,0 +1,9 @@
<Tooltip title="Delete" size="sm">
<Button variant="plain">Small</Button>
</Tooltip>
<Tooltip title="Delete" size="md">
<Button variant="plain">Medium</Button>
</Tooltip>
<Tooltip title="Delete" size="lg">
<Button variant="plain">Large</Button>
</Tooltip>

64
docs/data/joy/components/tooltip/TooltipUsage.js Normal file
View File

@@ -0,0 +1,64 @@
import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/joy/IconButton';
import Tooltip from '@mui/joy/Tooltip';
import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
export default function TooltipUsage() {
return (
<JoyUsageDemo
componentName="Tooltip"
data={[
{
propName: 'variant',
knob: 'radio',
defaultValue: 'solid',
options: ['plain', 'outlined', 'soft', 'solid'],
},
{
propName: 'color',
knob: 'color',
defaultValue: 'neutral',
},
{
propName: 'size',
knob: 'radio',
options: ['sm', 'md', 'lg'],
defaultValue: 'md',
},
{
propName: 'open',
knob: 'controlled',
},
{
propName: 'placement',
knob: 'placement',
defaultValue: 'bottom',
},
{
propName: 'arrow',
knob: 'switch',
defaultValue: false,
},
]}
renderDemo={({ open, ...props }) => (
<React.Fragment>
{open === undefined && (
<Tooltip title="This is a tooltip" {...props}>
<IconButton size="lg" variant="soft" color="neutral">
<DeleteIcon />
</IconButton>
</Tooltip>
)}
{typeof open === 'boolean' && (
<Tooltip title="This is a tooltip" open={open} {...props}>
<IconButton size="lg" variant="soft" color="neutral">
<DeleteIcon />
</IconButton>
</Tooltip>
)}
</React.Fragment>
)}
/>
);
}

22
docs/data/joy/components/tooltip/TooltipVariants.js Normal file
View File

@@ -0,0 +1,22 @@
import Box from '@mui/joy/Box';
import Tooltip from '@mui/joy/Tooltip';
import Button from '@mui/joy/Button';
export default function TooltipVariants() {
return (
<Box sx={{ display: 'flex', gap: 4, width: '100%', justifyContent: 'center' }}>
<Tooltip title="Delete" variant="solid">
<Button variant="solid">Solid</Button>
</Tooltip>
<Tooltip title="Delete" variant="soft">
<Button variant="soft">Soft</Button>
</Tooltip>
<Tooltip title="Delete" variant="outlined">
<Button variant="outlined">Outlined</Button>
</Tooltip>
<Tooltip title="Delete" variant="plain">
<Button variant="plain">Plain</Button>
</Tooltip>
</Box>
);
}

22
docs/data/joy/components/tooltip/TooltipVariants.tsx Normal file
View File

@@ -0,0 +1,22 @@
import Box from '@mui/joy/Box';
import Tooltip from '@mui/joy/Tooltip';
import Button from '@mui/joy/Button';
export default function TooltipVariants() {
return (
<Box sx={{ display: 'flex', gap: 4, width: '100%', justifyContent: 'center' }}>
<Tooltip title="Delete" variant="solid">
<Button variant="solid">Solid</Button>
</Tooltip>
<Tooltip title="Delete" variant="soft">
<Button variant="soft">Soft</Button>
</Tooltip>
<Tooltip title="Delete" variant="outlined">
<Button variant="outlined">Outlined</Button>
</Tooltip>
<Tooltip title="Delete" variant="plain">
<Button variant="plain">Plain</Button>
</Tooltip>
</Box>
);
}

12
docs/data/joy/components/tooltip/TooltipVariants.tsx.preview Normal file
View File

@@ -0,0 +1,12 @@
<Tooltip title="Delete" variant="solid">
<Button variant="solid">Solid</Button>
</Tooltip>
<Tooltip title="Delete" variant="soft">
<Button variant="soft">Soft</Button>
</Tooltip>
<Tooltip title="Delete" variant="outlined">
<Button variant="outlined">Outlined</Button>
</Tooltip>
<Tooltip title="Delete" variant="plain">
<Button variant="plain">Plain</Button>
</Tooltip>

87
docs/data/joy/components/tooltip/tooltip.md Normal file
View File

@@ -0,0 +1,87 @@
---
productId: joy-ui
title: React Tooltip component
components: Tooltip
githubLabel: 'scope: tooltip'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
---
# Tooltip
<p class="description">Tooltips display informative text when users hover over, focus on, or tap an element.</p>
{{"component": "@mui/docs/ComponentLinkHeader"}}
## Introduction
{{"demo": "TooltipUsage.js", "hideToolbar": true, "bg": "gradient"}}
## Component
After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements:
```jsx
import Tooltip from '@mui/joy/Tooltip';
export default function MyApp() {
return <Tooltip />;
}
```
### Variants
The tooltip component supports the four global variants: `solid` (default), `soft`, `outlined` and `plain`.
{{"demo": "TooltipVariants.js"}}
### Colors
Every palette included in the theme is available via the `color` prop.
Play around combining different colors with different variants.
{{"demo": "TooltipColors.js"}}
### Sizes
The tooltip component comes with three sizes out of the box: `sm`, `md` (the default), and `lg`.
{{"demo": "TooltipSizes.js"}}
## Positioned tooltips
The `Tooltip` has 12 **placement** choices.
They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction.
{{"demo": "PositionedTooltips.js"}}
## Arrow tooltips
You can use the `arrow` prop to give your tooltip an arrow indicating which element it refers to.
{{"demo": "ArrowTooltips.js"}}
## Common examples
### GitHub tooltip
The `title` prop can receive a custom React element.
{{"demo": "GitHubTooltip.js"}}
## Accessibility
Here are a few tips for ensuring an accessible link component, based on [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/):
By default, the tooltip only labels its child element.
This is notably different from `title` which can either label **or** describe its child depending on whether the child already has a label.
For example, in:
```html
<button title="some more information">A button</button>
```
the `title` acts as an accessible description.
If you want the tooltip to act as an accessible description you can pass `describeChild`.
Note that you shouldn't use `describeChild` if the tooltip provides the only visual label. Otherwise, the child would have no accessible name and the tooltip would violate [success criterion 2.5.3 in WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html).
{{"demo": "AccessibilityTooltip.js"}}