Skip to content

Commit c982ad6

Browse files
committed
Add alternative to docs
1 parent 8c38359 commit c982ad6

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

docs/rules/a11y-no-title-usage.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,22 @@ const App = () => <RelativeTime date={new Date('2020-01-01T00:00:00Z')} />
1919
```
2020

2121
The `noTitle` attribute can be omitted because its default value is `true` internally.
22+
23+
## With alternative tooltip
24+
25+
If you want to still utilize a tooltip in a similar way to how the `title` attribute works, you can use the [Primer `Tooltip`](https://primer.style/components/tooltip/react/beta). If you use the `Tooltip` component, you must use it with an interactive element, such as with a button or a link.
26+
27+
```jsx
28+
import {RelativeTime, Tooltip} from '@primer/react'
29+
30+
const App = () => {
31+
const date = new Date('2020-01-01T00:00:00Z')
32+
return (
33+
<Tooltip text={date.toString()}>
34+
<Link href="#">
35+
<RelativeTime date={date} noTitle={true} />
36+
</Link>
37+
</Tooltip>
38+
)
39+
}
40+
```

0 commit comments

Comments
 (0)