Skip to content

Commit 3f85c3f

Browse files
JonasBaclaude
JonasBa
and
claude
authored
ref(core): convert tooltip to mdx (#95196)
Convert tooltip stories to mdx --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent d440e79 commit 3f85c3f

File tree

2 files changed

+222
-90
lines changed

2 files changed

+222
-90
lines changed

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

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
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 {space} from 'sentry/styles/space';
16+
import {Tooltip} from 'sentry/components/core/tooltip';
17+
import * as Storybook from 'sentry/stories';
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+
88+
```jsx
89+
<Tooltip title="You can hover over this tooltip" isHoverable>
90+
<Button>Hoverable</Button>
91+
</Tooltip>
92+
<Tooltip title="This tooltip will hide quickly">
93+
<Button>Non-hoverable</Button>
94+
</Tooltip>
95+
```
96+
97+
### Custom Width
98+
99+
Control the maximum width of tooltips using the `maxWidth` prop. The default maximum width is 225px.
100+
101+
<Storybook.Demo>
102+
<Flex gap={space(1)}>
103+
<Tooltip title="This tooltip has a very long message that will wrap to multiple lines by default">
104+
<Button>Default width</Button>
105+
</Tooltip>
106+
<Tooltip
107+
title="This tooltip has a very long message that will wrap to multiple lines with custom width"
108+
maxWidth={150}
109+
>
110+
<Button>Custom width</Button>
111+
</Tooltip>
112+
</Flex>
113+
</Storybook.Demo>
114+
115+
```jsx
116+
<Tooltip title="Long message with default width">
117+
<Button>Default width</Button>
118+
</Tooltip>
119+
<Tooltip title="Long message with custom width" maxWidth={150}>
120+
<Button>Custom width</Button>
121+
</Tooltip>
122+
```
123+
124+
### Rich Content
125+
126+
Tooltips can display rich content including formatted text, multiple lines, and React elements.
127+
128+
<Storybook.Demo>
129+
<Flex gap={space(1)}>
130+
<Tooltip
131+
title={
132+
<div>
133+
<strong>Bold text</strong>
134+
<br />
135+
Multiple lines
136+
<br />
137+
Rich content
138+
</div>
139+
}
140+
>
141+
<Button>Rich content</Button>
142+
</Tooltip>
143+
<Tooltip
144+
title="Line 1&#10;Line 2&#10;Line 3"
145+
>
146+
<Button>Multi-line text</Button>
147+
</Tooltip>
148+
</Flex>
149+
</Storybook.Demo>
150+
151+
```jsx
152+
<Tooltip title={<div><strong>Bold text</strong><br />Multiple lines<br />Rich content</div>}>
153+
<Button>Rich content</Button>
154+
</Tooltip>
155+
<Tooltip title="Line 1&#10;Line 2&#10;Line 3">
156+
<Button>Multi-line text</Button>
157+
</Tooltip>
158+
```
159+
160+
### Disabled State
161+
162+
Tooltips can be disabled entirely using the `disabled` prop, which prevents them from showing on hover.
163+
164+
<Storybook.Demo>
165+
<Flex gap={space(1)}>
166+
<Tooltip title="This tooltip is enabled">
167+
<Button>Enabled tooltip</Button>
168+
</Tooltip>
169+
<Tooltip title="This tooltip is disabled" disabled>
170+
<Button>Disabled tooltip</Button>
171+
</Tooltip>
172+
</Flex>
173+
</Storybook.Demo>
174+
175+
```jsx
176+
<Tooltip title="This tooltip is enabled">
177+
<Button>Enabled tooltip</Button>
178+
</Tooltip>
179+
<Tooltip title="This tooltip is disabled" disabled>
180+
<Button>Disabled tooltip</Button>
181+
</Tooltip>
182+
```
183+
184+
### Show Only on Overflow
185+
186+
For text that may or may not overflow, use the `showOnlyOnOverflow` prop to conditionally show tooltips only when content is truncated.
187+
188+
<Storybook.Demo>
189+
<Flex direction="column" gap={space(1)}>
190+
<div style={{width: 200}}>
191+
<Tooltip
192+
title="This text is long and will be truncated with overflow"
193+
showOnlyOnOverflow
194+
>
195+
<div style={{whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
196+
This text is long and will be truncated with overflow
197+
</div>
198+
</Tooltip>
199+
</div>
200+
<div style={{width: 200}}>
201+
<Tooltip title="Short text" showOnlyOnOverflow>
202+
<div style={{whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
203+
Short text
204+
</div>
205+
</Tooltip>
206+
</div>
207+
</Flex>
208+
</Storybook.Demo>
209+
210+
```jsx
211+
<Tooltip title="This text is long and will be truncated" showOnlyOnOverflow>
212+
<div style={{overflow: 'hidden', textOverflow: 'ellipsis'}}>
213+
This text is long and will be truncated
214+
</div>
215+
</Tooltip>
216+
```
217+
218+
### Accessibility
219+
220+
Tooltips automatically include proper ARIA attributes for screen readers. The component meets WCAG 2.2 AA compliance requirements for contrast and focus visibility.
221+
222+
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)