Version: 3.0.0


A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.


import { Tooltip } from 'native-base';




Customizing tooltip#

Tooltip is a wrapper around Box. So, it also accepts all the Box props.


You can pass custom backgroundColor using bg or backgroundColor, borderColor and borderWidth to Tooltip.


Name Type Description Default
label string Text to be placed in the tooltip -
isOpen boolean Whether the tooltip is opened. Useful for conrolling the open state -
isDisabled boolean Whether the tooltip is disabled -
defaultIsOpen boolean If true, the popover will be opened by default -
onClose () => void This function will be invoked when tooltip is closed. It'll also be called when user attempts to close the tooltip via Escape key -
onOpen () => void This function will be invoked when tooltip is opened -
openDelay number Duration in ms to wait till displaying the tooltip 0
closeDelay number Duration in ms to wait till hiding the tooltip 0
placement "bottom" | "top" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom" Tooltip placement bottom
children any Children passed will be used as Trigger element for the tooltip -
closeOnClick boolean Whether tooltip should be closed on Trigger click true
arrowSize number Size of the arrow 12
hasArrow boolean Whether tooltip should display arrow false
offset number Distance between the trigger and the tooltip -

Tooltip implements Box


NativeBase ships with a default theme for each component. Checkout the default theme of tooltip
We can easily extend the tooltip component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Tooltip: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
Read more about extending component theme here.