This is an illustration of Tooltip component.
placement
<Tooltip
placement="top"
trigger={(triggerProps) => {
return (
<Button className="h-24" {...triggerProps}>
<ButtonText>Hover on me!</ButtonText>
</Button>
)
}}
>
<TooltipContent>
<TooltipText>Tooltip</TooltipText>
</TooltipContent>
</Tooltip>

Installation

Step 1: Install the following dependencies:

npm i @gluestack-ui/tooltip

Step 2: Copy and paste the following code into your project.

import { createTooltip } from "@gluestack-ui/tooltip"
import {
AnimatePresence,
AnimatedView,
} from "@gluestack-style/animation-resolver"
import { styled } from "@gluestack-style/react"
import { View, Text } from "react-native"
const StyledRoot = styled(
View,
{
width: "$full",
height: "$full",
_web: {
pointerEvents: "none",
},
},
{}
)
const StyledContent = styled(
AnimatedView,
{
":initial": {
opacity: 0,
scale: 0.5,
},
":animate": {
opacity: 1,
scale: 1,
},
":exit": {
opacity: 0,
scale: 0.5,
},
":transition": {
type: "spring",
damping: 18,
stiffness: 250,
opacity: {
type: "timing",
duration: 250,
},
},
py: "$1",
px: "$3",
borderRadius: "$sm",
bg: "$background900",
_text: {
fontSize: "$xs",
color: "$text50",
},
_web: {
pointerEvents: "auto",
},
defaultProps: {
hardShadow: "2",
},
},
{
descendantStyle: ["_text"],
}
)
const StyledText = styled(
Text,
{
fontWeight: "$normal",
fontStyle: "normal",
letterSpacing: "$md",
variants: {
isTruncated: {
true: {
props: {
// @ts-ignore
numberOfLines: 1,
ellipsizeMode: "tail",
},
},
},
bold: {
true: {
fontWeight: "$bold",
},
},
underline: {
true: {
textDecorationLine: "underline",
},
},
strikeThrough: {
true: {
textDecorationLine: "line-through",
},
},
size: {
"2xs": {
fontSize: "$2xs",
},
xs: {
fontSize: "$xs",
},
sm: {
fontSize: "$sm",
},
md: {
fontSize: "$md",
},
lg: {
fontSize: "$lg",
},
xl: {
fontSize: "$xl",
},
"2xl": {
fontSize: "$2xl",
},
"3xl": {
fontSize: "$3xl",
},
"4xl": {
fontSize: "$4xl",
},
"5xl": {
fontSize: "$5xl",
},
"6xl": {
fontSize: "$6xl",
},
},
sub: {
true: {
fontSize: "$xs",
},
},
italic: {
true: {
fontStyle: "italic",
},
},
highlight: {
true: {
bg: "$yellow500",
},
},
},
defaultProps: {
size: "md",
},
color: "$red400",
fontFamily: "$body",
_web: {
userSelect: "none",
},
},
{
ancestorStyle: ["_text"],
}
)
export const Tooltip = createTooltip({
Root: StyledRoot,
Content: StyledContent,
Text: StyledText,
//@ts-ignore
AnimatePresence: AnimatePresence,
})
export const TooltipContent = Tooltip.Content
export const TooltipText = Tooltip.Text

Step 3: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.
import { Tooltip } from "@/components/ui/Tooltip"
export default () => (
<Tooltip>
<TooltipContent>
<TooltipText />
</TooltipContent>
</Tooltip>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Tooltip

It inherits all the properties of React Native's View component.
Prop
Type
Default
Description
isOpen
boolean
false
Whether the tooltip is opened. Useful for controlling the open state.
isDisabled
boolean
false
Whether the tooltip is disabled.
defaultIsOpen
boolean
false
If true, the popover will be opened by default.
onOpen
() => void
true
This function will be invoked when the tooltip is opened.
onClose
() => void
-
This function will be invoked when tooltip is closed. It will also be called when the user attempts to close the tooltip via Escape key or backdrop press.
openDelay
number
0
Duration in ms to wait till displaying the tooltip.
closeDelay
number
0
Duration in ms to wait till hiding the tooltip.
placement
"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"
bottom left
Tooltip placement
children
any
-
The content to display inside the tooltip.
closeOnClick
boolean
true
Whether tooltip should be closed on Trigger click.
trigger
() => any
-
Function that returns a React Element. This element will be used as a Trigger for the tooltip.
offset
number
10
Distance between the trigger and the tooltip.
crossOffset
number
-
The additional offset applied along the cross axis between the element and its trigger element.
shouldOverlapWithTrigger
boolean
false
Determines whether tooltip content should overlap with the trigger.
shouldFlip
boolean
true
Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
closeOnOverlayClick
boolean
true
Closes tooltip when clicked outside.

TooltipText

Contains all text related layout style props and actions. It inherits all the properties of React Native's Text component.

TooltipContent

Contains all backdrop related layout style props and actions. It inherits all the properties of React Native's View component.
Descendants Styling Props Props to style child components.
Sx Prop
Description
_text
Prop to style TooltipText Component

Accessibility

We have outlined the various features that ensure the Tooltip component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the WAI-ARIA design pattern.

Spec Doc

Explore the comprehensive details of the Tooltip in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.