Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element.

Import#

import { Tooltip } from '@chakra-ui/react'

Usage#

<Tooltip.Root>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Content>See the content</Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Using custom component#

To use the tooltip with a custom component, ensure that the component accepts a refand uses forwardRef.

Set the asChild prop to true on the Tooltip.Trigger component to ensure that the tooltip is rendered as a child of the trigger component.

<Tooltip.Root>
  <Tooltip.Trigger asChild>
    <Tag.Root>
      <Tag.Label>Hover me</Tag.Label>
    </Tag.Root>
  </Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Content>See the content</Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Rendering the arrow tip#

Use the Tooltip.Arrow component to render an arrow for the tooltip.

<Tooltip.Root>
  <Tooltip.Trigger bg='gray.300' color='black' padding='2' rounded='sm'>
    <MdSettings />
  </Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Content>
      <Tooltip.Arrow />
      See the content
    </Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

To disable showing a tooltip, pass the disabled prop to the Tooltip component.

<Tooltip.Root disabled>
  <Tooltip.Trigger>
    <MdSettings />
  </Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Content>
      <Tooltip.Arrow />
      See the content
    </Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Changing the placement#

Using the placement prop you can adjust where your tooltip will be displayed.

<Tooltip.Root placement='bottom-start'>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Content>
      <Tooltip.Arrow />
      See the content
    </Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

Changing the open and close delay#

<Tooltip.Root openDelay={500} closeDelay={100}>
  <Tooltip.Trigger>Hover me</Tooltip.Trigger>
  <Tooltip.Positioner>
    <Tooltip.Content>
      <Tooltip.Arrow />
      See the content
    </Tooltip.Content>
  </Tooltip.Positioner>
</Tooltip.Root>

The Tooltip component is a single part component. All of the styling is applied directly to the div element.

To learn more about styling single part components, visit the Component Style page.

Theming properties#

The properties that affect the theming of the Tooltip component are:

variant: The visual variant of the button. Variants for this component are not implemented in the default theme.
colorScheme: The color scheme of the button. Color schemes for this component are not implemented in the default theme.
size: The size of the button. Sizes for this component are not implemented in the default theme.

Theming utilities#

defineStyle: a function used to create style objects.
defineStyleConfig: a function used to define the style configuration for a single part component.

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

Customizing the default theme#

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define the base component styles
const baseStyle = {
  borderRadius: 'md', // add a border radius
  fontWeight: 'normal', // change the font weight
  border: '1px solid', // add a border
}

// export the component theme
export const tooltipTheme = defineStyleConfig({ baseStyle })

After customizing the default theme, we can import it in our theme file and add it in the components property.

import { extendTheme } from '@chakra-ui/react'
import { tooltipTheme } from './components/Tooltip'

const theme = extendTheme({
  components: {
    Tooltip: tooltipTheme,
  },
})

export default theme

This is a crucial step to make sure that any changes that we make to the tooltip theme are applied.

Adding a custom size#

Let's assume we want to create a small, medium, and large size. Here's how we can do that:

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define custom sizes
const sizes = {
  sm: defineStyle({
    fontSize: 'sm',
    py: '1',
    px: '2',
    maxW: '200px',
  }),
  md: defineStyle({
    fontSize: 'md',
    py: '2',
    px: '3',
    maxW: '300px',
  }),
  lg: defineStyle({
    fontSize: 'lg',
    py: '2',
    px: '4',
    maxW: '350px',
  }),
}

// export the component theme
export const tooltipTheme = defineStyleConfig({ sizes })

Every time you're adding anything new to the theme, you need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.

Adding a custom variant#

Let's assume we want to include a variant that can use a color scheme. Here's how we can do that:

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define styles for custom variant
const colorfulVariant = defineStyle((props) => {
  const { colorScheme: c } = props // add color scheme as a prop
  return {
    _light: {
      bg: `${c}.300`,
      borderColor: `${c}.600`,
      color: `${c}.800`,
    },
    _dark: {
      bg: `${c}.600`,
      borderColor: `${c}.300`,
      color: `${c}.200`,
    },
  }
})

// define custom variants
const variants = {
  colorful: colorfulVariant,
}

// export the component theme
export const tooltipTheme = defineStyleConfig({ variants })

Using a custom color scheme#

Let's assume we want to use our own custom color scale based on our brand. First, we need to define the color scale in the main theme file:

import { extendTheme } from '@chakra-ui/react';
import { tooltipTheme } from './components/Tooltip';

const theme = extendTheme({
  // add a custom color scheme
  colors: {
    brand: {
      50: '#ffeae1',
      ...
      500: '#d24314',
      ...
      900: '#1e0400',
    },
  },

});

export default theme;

Then, we can use the custom color scale as the color scheme for the tooltip:

<Tooltip colorPalette='brand'>...</Tooltip>

Changing the default properties#

Let's assume we want to add a default size, variant, and color scheme of every tooltip in our app. Here's how we can do that:

import { defineStyle, defineStyleConfig } from '@chakra-ui/react'

// define which sizes, variants, and color schemes are applied by default
const defaultProps = {
  size: 'md',
  variant: 'colorful',
  colorScheme: 'brand',
}

// export the component theme
export const tooltipTheme = defineStyleConfig({ defaultProps })

Showcase#

import React from 'react';
import {
  ChakraProvider,
  Box,
  Center,
  SimpleGrid,
  GridItem,
  Text,
  Icon,
  Tooltip,
} from '@chakra-ui/react';
import theme from './theme';
import { ColorModeSwitcher } from './ColorModeSwitcher';
import { QuestionIcon } from '@chakra-ui/icons';

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      <Box position="relative" h="100vh" p={12}>
        <Center>
          <SimpleGrid columns={[1, 1, 1, 2, 3]} spacing="12">
            <GridItem
            border="1px solid"
            borderRadius="xl"
            p={8}
            _light={{ bg: 'gray.200' }}
            _dark={{ bg: 'gray.700' }}
            >
              <Text display="inline-flex" alignItems="baseline">
                Hover the icon for more information.
                <Tooltip
                label="Tooltip with new theme defaults of brand color scheme and medium size."
                placement="top"
                >
                <Icon as={QuestionIcon} mx={2} color="brand.400" />
                </Tooltip>
              </Text>
            </GridItem>
            <GridItem
            border="1px solid"
            borderRadius="xl"
            p={8}
            _light={{ bg: 'gray.200' }}
            _dark={{ bg: 'gray.700' }}
            >
              <Text display="inline-flex" alignItems="baseline">
                Hover the icon for more information.
                <Tooltip
                label="Tooltip with blue color scheme and new large size."
                placement="top"
                colorScheme="blue"
                size="lg"
                >
                <Icon as={QuestionIcon} mx={2} color="blue.400" />
                </Tooltip>
              </Text>
            </GridItem>
            <GridItem
            border="1px solid"
            borderRadius="xl"
            p={8}
            _light={{ bg: 'gray.200' }}
            _dark={{ bg: 'gray.700' }}
            >
              <Text display="inline-flex" alignItems="baseline">
                Hover the icon for more information.
                <Tooltip
                label="Tooltip with green color scheme and new small size."
                placement="top"
                colorScheme="green"
                size="sm"
                >
                <Icon as={QuestionIcon} mx={2} color="green.400" />
                </Tooltip>
              </Text>
            </GridItem>
          </SimpleGrid>
        </Center>
        <ColorModeSwitcher />
      </Box>
    </ChakraProvider>
  );
}

Open Sandbox

Edit this page on GitHub