Tooltip | NativeBase | Universal Components for React and React Native
IMPORTANT MESSAGE
Upgrade to gluestack-ui
If you are starting a new project with NativeBase, we recommend using gluestack-ui
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase.
Migrate to gluestack-ui
If you are working on a project with NativeBase, we recommend using @gluestack-ui/themed
NativeBase
3.4.x
Light mode active 🚨
Do you really want to stay here? Really? Really? Pakka? Sure? Are you a true developer?
No
Back to DarkMode
Disclosure
If you are starting a new project, please try gluestack-ui for better performance and new design.
Tooltip
A tooltip provides a brief, informative message when a user interacts with an element. Methods of tooltip initiation include: through a mouse-hover gesture or a keyboard-hover gesture.
Import
Copyimport { Tooltip } from "native-base";
Examples
Basic
Playgroundfunction Example() {return <Center><Tooltip label="Click here to read more" openDelay={500}><Button>More</Button></Tooltip></Center>;}
Positions
Playgroundfunction Example() {const [position, setPosition] = React.useState("top left");return <VStack space={6} alignSelf="flex-start" w="100%">{/* @ts-ignore */}<Tooltip label={position} placement={position}><Button alignSelf="center">ToolTip</Button></Tooltip><Select selectedValue={position} mx={{base: 0,md: "auto"}} accessibilityLabel="Select a position for Tooltip" onValueChange={nextValue => setPosition(nextValue)} _selectedItem={{bg: "cyan.600",endIcon: <CheckIcon size={4} />}}><Select.Item label="Top Left" value="top left" /><Select.Item label="Top" value="top" /><Select.Item label="Top Right" value="top right" /><Select.Item label="Right Top" value="right top" /><Select.Item label="Right" value="right" /><Select.Item label="Right Bottom" value="right bottom" /><Select.Item label="Bottom Left" value="bottom left" /><Select.Item label="Bottom" value="bottom" /><Select.Item label="Bottom Right" value="bottom right" /><Select.Item label="Left Top" value="left top" /><Select.Item label="Left" value="left" /><Select.Item label="Left Bottom" value="left bottom" /></Select></VStack>;}
Customizing tooltip
Playgroundfunction Example() {return <Center><Tooltip label="Click here to read more" openDelay={500} bg="indigo.500" _text={{color: "#fff"}}><Button>More</Button></Tooltip></Center>;}
Tip: You can pass custom backgroundColor using bg or backgroundColor, borderColor and borderWidth to Tooltip.
Props
Tooltip implements , , , , , , , , ,
label
Text to be placed in the tooltip
Type: string
isOpen
Whether the tooltip is opened. Useful for conrolling the open state
Type: boolean
isDisabled
Whether the tooltip is disabled
Type: boolean
defaultIsOpen
If true, the popover will be opened by default
Type: boolean
onClose
This function will be invoked when tooltip is closed. It'll also be called when user attempts to close the tooltip via Escape key
Type: () => void
onOpen
This function will be invoked when tooltip is opened
Type: () => void
openDelay
Duration in ms to wait till displaying the tooltip
Type: number
Default: 0
closeDelay
Duration in ms to wait till hiding the tooltip
Type: number
Default: 0
placement
Tooltip placement
Type: "bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"
Default: bottom
children
Children passed will be used as Trigger element for the tooltip
Type: any
closeOnClick
Whether tooltip should be closed on Trigger click
Type: boolean
Default: true
arrowSize
Size of the arrow
Type: number
Default: 12
hasArrow
Whether tooltip should display arrow
Type: boolean
Default: false
offset
Distance between the trigger and the tooltip
Type: number
Styling
NativeBase ships with a default theme for each component. Check out the default theme of the tooltip.
Info: We can easily extend the tooltip component theme using extendTheme function as described in the documentation .
Accessibility
Adheres to the
Keyboard Interactions
Name
Description
Space
If open, closes the tooltip without delay.
Enter
If open, closes the tooltip without delay.
Tab
Moves focus to the next focusable element.
Esc
If open, closes the tooltip without delay.
MadeWithNativeBase
gluestack-ui