Skip to content

Commit 6057d8c

Browse files
authored
Merge pull request #1267 from moloko/patch-1
docs: enhance 'Clickable tooltip' section with accessibility info
2 parents 3346e9f + e6e515f commit 6057d8c

1 file changed

Lines changed: 4 additions & 2 deletions

File tree

docs/docs/getting-started.mdx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,9 +179,11 @@ import { Tooltip } from 'react-tooltip'
179179
<Tooltip anchorSelect=".my-anchor-element">Hello world!</Tooltip>
180180
</div>
181181

182-
### Clickable tooltip
182+
### Clickable tooltip/accessibility
183183

184-
By default, you can't interact with elements inside the tooltip. To allow for proper usage of elements such as buttons and inputs, use the `clickable` prop.
184+
By default the tooltip disappears when the pointer leaves the tooltip anchor element - which means you can't interact with elements inside the tooltip and that it won't meet the 'hoverable' requirement of [WCAG Success Criterion 1.4.13 Content on Hover or Focus](https://www.w3.org/TR/WCAG22/#content-on-hover-or-focus).
185+
186+
To allow for proper usage of elements such as buttons and inputs - or to ensure the pointer can be moved over the tooltip content without it disappearing - use the `clickable` prop.
185187

186188
```jsx
187189
<a id="not-clickable">◕‿‿◕</a>

0 commit comments

Comments
 (0)