Tooltip | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
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.
Show Code
Playground
Import
Copy
import { Tooltip } from "native-base";
Examples
Basic
Playground
Positions
Playground
Customizing tooltip
Tooltip is a wrapper around . So, it also accepts all the props.
Playground

Tip: You can pass custom backgroundColor using bg or backgroundColor, borderColor and borderWidth to Tooltip.
Props
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
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.
Nativebase logo
MadeWithNativeBase