Skip to content

Commit d52cbcc

Browse files
committed
docs(tooltip): showcase rich tooltip and document both variants
Adds a 'Rich tooltips' section to the example app (full title/content/actions variant plus a body-only one), registers the RichTooltip page in the docs component map so the generated docs cover Tooltip.Rich, and cross-references the rich variant from the plain Tooltip JSDoc.
1 parent 793d397 commit d52cbcc

3 files changed

Lines changed: 27 additions & 0 deletions

File tree

docs/docusaurus.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,7 @@ const config = {
175175
},
176176
Tooltip: {
177177
Tooltip: 'Tooltip/Tooltip',
178+
TooltipRich: 'Tooltip/RichTooltip',
178179
},
179180
TouchableRipple: {
180181
TouchableRipple: 'TouchableRipple/TouchableRipple',

example/src/Examples/TooltipExample.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
Appbar,
77
Avatar,
88
Banner,
9+
Button,
910
Chip,
1011
FAB,
1112
IconButton,
@@ -146,6 +147,29 @@ const TooltipExample = () => {
146147
</Card>
147148
</Tooltip>
148149
</List.Section>
150+
<List.Section title="Rich tooltips">
151+
<View style={styles.iconButtonContainer}>
152+
<Tooltip.Rich
153+
title="Add to library"
154+
content="Save this item to read it later from any of your devices."
155+
actions={
156+
<>
157+
<Button compact onPress={() => {}}>
158+
Learn more
159+
</Button>
160+
<Button compact mode="contained" onPress={() => {}}>
161+
Add
162+
</Button>
163+
</>
164+
}
165+
>
166+
<IconButton icon="plus" size={24} onPress={() => {}} />
167+
</Tooltip.Rich>
168+
<Tooltip.Rich content="A rich tooltip with body text only — no title or actions.">
169+
<IconButton icon="information" size={24} onPress={() => {}} />
170+
</Tooltip.Rich>
171+
</View>
172+
</List.Section>
149173
</ScreenWrapper>
150174
<View style={styles.fabContainer}>
151175
<Tooltip title="Press Me">

src/components/Tooltip/Tooltip.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,8 @@ export type Props = {
5858
*
5959
* Plain tooltips, when activated, display a text label identifying an element, such as a description of its function. Tooltips should include only short, descriptive text and avoid restating visible UI text.
6060
*
61+
* For tooltips with a title, supporting text and action buttons, see `Tooltip.Rich`.
62+
*
6163
* ## Usage
6264
* ```js
6365
* import * as React from 'react';

0 commit comments

Comments
 (0)