Tooltip | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
Data Display
Typography
Disclosure
Media and Icons
Others
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
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of 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