Tooltip

Easily provide hints or display details for users, enhancing usability and clarity.

Installation

API Reference

This is an illustration of Tooltip component.

placement

<Tooltip
  placement="top"
  trigger={(triggerProps) => {
    return (
      <Button {...triggerProps}>
        <ButtonText>Hover on me!</ButtonText>
      </Button>
    )
  }}
>
  <TooltipContent>
    <TooltipText>Tooltip</TooltipText>
  </TooltipContent>
</Tooltip>

Installation

CLI

Manual

Run the following command:

npx gluestack-ui add tooltip

Step 1: Install the following dependencies:

npm i @gluestack-ui/tooltip @legendapp/motion

Important Note

Note: At present, we have integrated the @legendapp/motion for animation. You have the option to remove this and implement your own custom animation wrapper.

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

"use client"
import React from "react"
import { createTooltip } from "@gluestack-ui/tooltip"
import { View, Text } from "react-native"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
import { tva } from "@gluestack-ui/nativewind-utils/tva"
import { withStyleContext } from "@gluestack-ui/nativewind-utils/withStyleContext"
import { Motion, AnimatePresence } from "@legendapp/motion"
import { cssInterop } from "nativewind"
export const UITooltip = createTooltip({
  Root: withStyleContext(View),
  Content: Motion.View,
  Text: Text,
  AnimatePresence: AnimatePresence,
})

cssInterop(Motion.View, { className: "style" })

const tooltipStyle = tva({
  base: "w-full h-full web:pointer-events-none",
})

const tooltipContentStyle = tva({
  base: "py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto",
})

const tooltipTextStyle = tva({
  base: "font-normal tracking-normal web:select-none text-xs text-typography-50",

  variants: {
    isTruncated: {
      true: {
        props: "line-clamp-1 truncate",
      },
    },
    bold: {
      true: "font-bold",
    },
    underline: {
      true: "underline",
    },
    strikeThrough: {
      true: "line-through",
    },
    size: {
      "2xs": "text-2xs",
      xs: "text-xs",
      sm: "text-sm",
      md: "text-base",
      lg: "text-lg",
      xl: "text-xl",
      "2xl": "text-2xl",
      "3xl": "text-3xl",
      "4xl": "text-4xl",
      "5xl": "text-5xl",
      "6xl": "text-6xl",
    },
    sub: {
      true: "text-xs",
    },
    italic: {
      true: "italic",
    },
    highlight: {
      true: "bg-yellow-500",
    },
  },
})

type ITooltipProps = React.ComponentProps<typeof UITooltip> &
  VariantProps<typeof tooltipStyle> & { className?: string }
type ITooltipContentProps = React.ComponentProps<typeof UITooltip.Content> &
  VariantProps<typeof tooltipContentStyle> & { className?: string }
type ITooltipTextProps = React.ComponentProps<typeof UITooltip.Text> &
  VariantProps<typeof tooltipTextStyle> & { className?: string }

const Tooltip = React.forwardRef<
  React.ElementRef<typeof UITooltip>,
  ITooltipProps
>(({ className, ...props }, ref) => {
  return (
    <UITooltip
      ref={ref}
      className={tooltipStyle({ class: className })}
      {...props}
    />
  )
})

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof UITooltip.Content>,
  ITooltipContentProps & { className?: string }
>(({ className, ...props }, ref) => {
  return (
    <UITooltip.Content
      ref={ref}
      {...props}
      className={tooltipContentStyle({
        class: className,
      })}
      pointerEvents="auto"
    />
  )
})

const TooltipText = React.forwardRef<
  React.ElementRef<typeof UITooltip.Text>,
  ITooltipTextProps & { className?: string }
>(({ size, className, ...props }, ref) => {
  return (
    <UITooltip.Text
      ref={ref}
      className={tooltipTextStyle({ size, class: className })}
      {...props}
    />
  )
})

export { Tooltip, TooltipContent, TooltipText }

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.

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.

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.

Examples

A tooltip component with an avatar is a user interface element that displays a small pop-up box of additional information when the user hovers over or interacts with an avatar or an icon.

function App() {
  return (
    <Box className="justify-center h-96">
      <AvatarGroup className="flex-row">
        <Tooltip
          placement="top"
          trigger={(triggerProps) => {
            return (
              <Avatar
                size="lg"
                {...triggerProps}
                className="border-outline-0 border-2 bg-primary-600"
              >
                <AvatarFallbackText>+ 3</AvatarFallbackText>
              </Avatar>
            )
          }}
        >
          <TooltipContent className="p-4 rounded-md max-w-72 bg-background-50">
            <VStack space="md" className="rounded-lg">
              <Heading size="sm">View all members of this channel</Heading>
              <Center>
                <Text className="font-sm">
                  Includes John, Sarah, Mike, Emily
                </Text>
                <Text className="font-sm">and David</Text>
              </Center>
            </VStack>
          </TooltipContent>
        </Tooltip>
        <Avatar size="lg" className="border-outline-0 border-2 bg-emerald-600">
          <AvatarFallbackText className="text-white">
            Sandeep Srivastva
          </AvatarFallbackText>
        </Avatar>
        <Avatar size="lg" className="border-outline-0 border-2 bg-cyan-600">
          <AvatarFallbackText className="text-white">
            Arjun Kapoor
          </AvatarFallbackText>
        </Avatar>
        <Avatar size="lg" className="border-outline-0 border-2 bg-indigo-600">
          <AvatarFallbackText className="text-white">
            Ritik Sharma{" "}
          </AvatarFallbackText>
        </Avatar>
      </AvatarGroup>
    </Box>
  )
}

A tooltip component with an icon is a user interface element that provides contextual information or explanatory text when the user hovers over or interacts with an icon.

function App() {
  return (
    <Box className="h-96 justify-center">
      <Tooltip
        placement="top"
        trigger={(triggerProps) => {
          return (
            <Avatar size="md" {...triggerProps} className="bg-primary-600">
              <Icon as={EditIcon} size="sm" className="text-white" />
            </Avatar>
          )
        }}
      >
        <TooltipContent className="bg-background-50 rounded-md">
          <Box className="p-2.5">
            <Text size="sm">New message</Text>
            <HStack space="xs" className="p-1 ml-3">
              <Avatar size="xs" className="bg-gray-500 rounded">
                <Icon as={Command} className="text-typography-0" />
              </Avatar>
              <Avatar size="xs" className="bg-gray-500 rounded">
                <AvatarFallbackText>N</AvatarFallbackText>
              </Avatar>
            </HStack>
          </Box>
        </TooltipContent>
      </Tooltip>
    </Box>
  )
}

Tooltip

Installation

Run the following command:

Step 1: Install the following dependencies:

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

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

API Reference

Component Props

Tooltip

TooltipText

TooltipContent

Accessibility

Examples

Tooltip with Heading

Tooltip with Icon