Skip to content

Commit 79df9fa

Browse files
JonasBaJonasBa
authored
Reapply "ref(core): convert tooltip to mdx (#95196)" (#95254)
Reapplying tooltip doc change
1 parent 220f030 commit 79df9fa

File tree

2 files changed

+249
-90
lines changed

2 files changed

+249
-90
lines changed

‎static/app/components/core/tooltip/index.mdx

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
---
2+
title: Tooltip
3+
description: Tooltips provide contextual information about an element when users hover over it.
4+
source: 'sentry/components/core/tooltip'
5+
resources:
6+
js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/tooltip/index.tsx
7+
a11y:
8+
WCAG 1.4.3: https://www.w3.org/TR/WCAG22/#contrast-minimum
9+
WCAG 2.4.7: https://www.w3.org/TR/WCAG22/#focus-visible
10+
WAI-ARIA Tooltip Practices: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
11+
---
12+
13+
import {Button} from 'sentry/components/core/button';
14+
import {Flex} from 'sentry/components/core/layout';
15+
import {Tooltip} from 'sentry/components/core/tooltip';
16+
import * as Storybook from 'sentry/stories';
17+
import {space} from 'sentry/styles/space';
18+
19+
import types from '!!type-loader!sentry/components/core/tooltip/index';
20+
21+
export {types};
22+
23+
To create a basic tooltip, wrap any element with `<Tooltip>` and provide the `title` prop with the content to display.
24+
25+
<Storybook.Demo>
26+
<Tooltip title="This is a helpful tooltip">
27+
<Button>Hover me</Button>
28+
</Tooltip>
29+
</Storybook.Demo>
30+
```jsx
31+
<Tooltip title="This is a helpful tooltip">
32+
<Button>Hover me</Button>
33+
</Tooltip>
34+
```
35+
36+
### Position
37+
38+
Tooltips can be positioned in different directions using the `position` prop. Available positions include `top`, `bottom`, `left`, and `right`.
39+
40+
<Storybook.Demo>
41+
<Flex direction="column" gap={space(1)} align="center">
42+
<Tooltip title="Top tooltip" position="top" forceVisible>
43+
<Button>Top</Button>
44+
</Tooltip>
45+
<Flex gap={space(1)}>
46+
<Tooltip title="Left tooltip" position="left" forceVisible>
47+
<Button>Left</Button>
48+
</Tooltip>
49+
<Tooltip title="Right tooltip" position="right" forceVisible>
50+
<Button>Right</Button>
51+
</Tooltip>
52+
</Flex>
53+
<Tooltip title="Bottom tooltip" position="bottom" forceVisible>
54+
<Button>Bottom</Button>
55+
</Tooltip>
56+
</Flex>
57+
</Storybook.Demo>
58+
```jsx
59+
<Tooltip title="Top tooltip" position="top">
60+
<Button>Top</Button>
61+
</Tooltip>
62+
<Tooltip title="Left tooltip" position="left">
63+
<Button>Left</Button>
64+
</Tooltip>
65+
<Tooltip title="Right tooltip" position="right">
66+
<Button>Right</Button>
67+
</Tooltip>
68+
<Tooltip title="Bottom tooltip" position="bottom">
69+
<Button>Bottom</Button>
70+
</Tooltip>
71+
```
72+
73+
### Hoverable Tooltips
74+
75+
By default, tooltips hide when you move your cursor toward them. For interactive tooltips that contain clickable content, use the `isHoverable` prop to allow users to hover over the tooltip itself.
76+
77+
<Storybook.Demo>
78+
<Flex gap={space(1)}>
79+
<Tooltip title="You can hover over this tooltip" isHoverable>
80+
<Button>Hoverable</Button>
81+
</Tooltip>
82+
<Tooltip title="This tooltip will hide quickly">
83+
<Button>Non-hoverable</Button>
84+
</Tooltip>
85+
</Flex>
86+
</Storybook.Demo>
87+
```jsx
88+
<Tooltip title="You can hover over this tooltip" isHoverable>
89+
<Button>Hoverable</Button>
90+
</Tooltip>
91+
<Tooltip title="This tooltip will hide quickly">
92+
<Button>Non-hoverable</Button>
93+
</Tooltip>
94+
```
95+
96+
### Custom Width
97+
98+
Control the maximum width of tooltips using the `maxWidth` prop. The default maximum width is 225px.
99+
100+
<Storybook.Demo>
101+
<Flex gap={space(1)}>
102+
<Tooltip title="This tooltip has a very long message that will wrap to multiple lines by default">
103+
<Button>Default width</Button>
104+
</Tooltip>
105+
<Tooltip
106+
title="This tooltip has a very long message that will wrap to multiple lines with custom width"
107+
maxWidth={150}
108+
>
109+
<Button>Custom width</Button>
110+
</Tooltip>
111+
</Flex>
112+
</Storybook.Demo>
113+
```jsx
114+
<Tooltip title="This tooltip has a very long message that will wrap to multiple lines by default">
115+
<Button>Default width</Button>
116+
</Tooltip>
117+
<Tooltip
118+
title="This tooltip has a very long message that will wrap to multiple lines with custom width"
119+
maxWidth={150}
120+
>
121+
<Button>Custom width</Button>
122+
</Tooltip>
123+
```
124+
125+
### Rich Content
126+
127+
Tooltips can display rich content including formatted text, multiple lines, and React elements.
128+
129+
<Storybook.Demo>
130+
<Flex gap={space(1)}>
131+
<Tooltip
132+
title={
133+
<div>
134+
<strong>Bold text</strong>
135+
<br />
136+
Multiple lines
137+
<br />
138+
Rich content
139+
</div>
140+
}
141+
>
142+
<Button>Rich content</Button>
143+
</Tooltip>
144+
<Tooltip
145+
title={
146+
<div>
147+
Line 1
148+
<br />
149+
Line 2
150+
<br />
151+
Line 3
152+
</div>
153+
}
154+
>
155+
<Button>Multi-line text</Button>
156+
</Tooltip>
157+
</Flex>
158+
</Storybook.Demo>
159+
```jsx
160+
<Tooltip
161+
title={
162+
<div>
163+
<strong>Bold text</strong>
164+
<br />
165+
Multiple lines
166+
<br />
167+
Rich content
168+
</div>
169+
}
170+
>
171+
<Button>Rich content</Button>
172+
</Tooltip>
173+
<Tooltip
174+
title={
175+
<div>
176+
Line 1
177+
<br />
178+
Line 2
179+
<br />
180+
Line 3
181+
</div>
182+
}
183+
>
184+
<Button>Multi-line text</Button>
185+
</Tooltip>
186+
```
187+
188+
### Disabled State
189+
190+
Tooltips can be disabled entirely using the `disabled` prop, which prevents them from showing on hover.
191+
192+
<Storybook.Demo>
193+
<Flex gap={space(1)}>
194+
<Tooltip title="This tooltip is enabled">
195+
<Button>Enabled tooltip</Button>
196+
</Tooltip>
197+
<Tooltip title="This tooltip is disabled" disabled>
198+
<Button>Disabled tooltip</Button>
199+
</Tooltip>
200+
</Flex>
201+
</Storybook.Demo>
202+
203+
```jsx
204+
<Tooltip title="This tooltip is enabled">
205+
<Button>Enabled tooltip</Button>
206+
</Tooltip>
207+
<Tooltip title="This tooltip is disabled" disabled>
208+
<Button>Disabled tooltip</Button>
209+
</Tooltip>
210+
```
211+
212+
### Show Only on Overflow
213+
214+
For text that may or may not overflow, use the `showOnlyOnOverflow` prop to conditionally show tooltips only when content is truncated.
215+
216+
<Storybook.Demo>
217+
<Flex direction="column" gap={space(1)}>
218+
<div style={{width: 200}}>
219+
<Tooltip
220+
title="This text is long and will be truncated with overflow"
221+
showOnlyOnOverflow
222+
>
223+
<div style={{whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
224+
This text is long and will be truncated with overflow
225+
</div>
226+
</Tooltip>
227+
</div>
228+
<div style={{width: 200}}>
229+
<Tooltip title="Short text" showOnlyOnOverflow>
230+
<div style={{whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
231+
Short text
232+
</div>
233+
</Tooltip>
234+
</div>
235+
</Flex>
236+
</Storybook.Demo>
237+
```jsx
238+
<Tooltip title="This text is long and will be truncated" showOnlyOnOverflow>
239+
<div style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
240+
This text is long and will be truncated
241+
</div>
242+
</Tooltip>
243+
```
244+
245+
### Accessibility
246+
247+
Tooltips automatically include proper ARIA attributes for screen readers. The component meets WCAG 2.2 AA compliance requirements for contrast and focus visibility.
248+
249+
When using tooltips with interactive elements, ensure that the tooltip content is also accessible through keyboard navigation if needed.

‎static/app/components/core/tooltip/index.stories.tsx

Lines changed: 0 additions & 90 deletions
This file was deleted.

0 commit comments

Comments
 (0)