Version: 3.1.0

Tooltip

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#

import { Tooltip } from 'native-base';

Examples#

Basic#

Positions#

Customizing tooltip#

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

Tip

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

Props#

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

Styling#

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 */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.

Accessibility#

Adheres to the Tooltip WAI-ARIA design pattern.

Keyboard Interactions#

NameDescription
SpaceIf open, closes the tooltip without delay.
EnterIf open, closes the tooltip without delay.
TabMoves focus to the next focusable element.
EscIf open, closes the tooltip without delay.