The React component to use as the trigger for the tooltip
Tooltip
A tooltip is a brief, informative message that appears when a user interacts with an element.
Props#
childrenrequired
childrenrequiredDescription
Type
ReactNodearia-label
aria-labelDescription
The accessible, human friendly label to use for
screen readers.
If passed, tooltip will show the content label
but expose only `aria-label` to assistive technologies
Type
stringarrowPadding
arrowPaddingDescription
The padding required to prevent the arrow from reaching the very edge of the popper.
Type
numberDefault
8arrowShadowColor
arrowShadowColorType
stringarrowSize
arrowSizeType
numberDefault
10closeDelay
closeDelayDescription
Delay (in ms) before hiding the tooltip
Type
numberDefault
0mscloseOnClick
closeOnClickDescription
If true, the tooltip will hide on click
Type
booleanDefault
truecloseOnEsc
closeOnEscDescription
If true, the tooltip will hide on pressing Esc key
Type
booleanDefault
truecloseOnMouseDown
closeOnMouseDownDescription
If true, the tooltip will hide while the mouse is down
@deprecated - use closeOnPointerDown instead
Type
booleancloseOnPointerDown
closeOnPointerDownDescription
If true, the tooltip will hide while the pointer is down
Type
booleancloseOnScroll
closeOnScrollType
booleancolorScheme
colorSchemeDescription
Color Schemes for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
Type
stringdefaultIsOpen
defaultIsOpenDescription
If true, the tooltip will be initially shown
Type
booleandirection
directionDescription
Theme direction ltr or rtl. Popper's placement will
be set accordingly
Type
"ltr" | "rtl"Default
"ltr"gutter
gutterDescription
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
NB: If you define offset prop, it'll override the gutter.
Type
numberDefault
8hasArrow
hasArrowDescription
If true, the tooltip will show an arrow tip
Type
booleanisDisabled
isDisabledType
booleanisOpen
isOpenDescription
If true, the tooltip will be shown (in controlled mode)
Type
booleanlabel
labelDescription
The label of the tooltip
Type
ReactNodemodifiers
modifiersDescription
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass. @see Docs https://popper.js.org/docs/v2/modifiers/
Type
Partial<Modifier<string, any>>[]motionProps
motionPropsType
HTMLMotionProps<"div">offset
offsetDescription
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]onClose
onCloseDescription
Callback to run when the tooltip hides
Type
(() => void)onOpen
onOpenDescription
Callback to run when the tooltip shows
Type
(() => void)openDelay
openDelayDescription
Delay (in ms) before showing the tooltip
Type
numberDefault
0msplacement
placementDescription
The placement of the popper relative to its reference.
Type
PlacementWithLogicalDefault
"bottom"portalProps
portalPropsDescription
Props to be forwarded to the portal component
Type
Pick<PortalProps, "appendToParentPortal" | "containerRef">shouldWrapChildren
shouldWrapChildrenDescription
If true, the tooltip will wrap its children
in a `<span/>` with `tabIndex=0`
Type
booleansize
sizeDescription
Sizes for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
Type
stringvariant
variantDescription
Variants for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
Type
stringProps#
childrenrequired
childrenrequiredDescription
The React component to use as the trigger for the tooltip
Type
ReactNodearia-label
aria-labelDescription
The accessible, human friendly label to use for
screen readers.
If passed, tooltip will show the content label
but expose only `aria-label` to assistive technologies
Type
stringarrowPadding
arrowPaddingDescription
The padding required to prevent the arrow from reaching the very edge of the popper.
Type
numberDefault
8arrowShadowColor
arrowShadowColorType
stringarrowSize
arrowSizeType
numberDefault
10closeDelay
closeDelayDescription
Delay (in ms) before hiding the tooltip
Type
numberDefault
0mscloseOnClick
closeOnClickDescription
If true, the tooltip will hide on click
Type
booleanDefault
truecloseOnEsc
closeOnEscDescription
If true, the tooltip will hide on pressing Esc key
Type
booleanDefault
truecloseOnMouseDown
closeOnMouseDownDescription
If true, the tooltip will hide while the mouse is down
@deprecated - use closeOnPointerDown instead
Type
booleancloseOnPointerDown
closeOnPointerDownDescription
If true, the tooltip will hide while the pointer is down
Type
booleancloseOnScroll
closeOnScrollType
booleancolorScheme
colorSchemeDescription
Color Schemes for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
Type
stringdefaultIsOpen
defaultIsOpenDescription
If true, the tooltip will be initially shown
Type
booleandirection
directionDescription
Theme direction ltr or rtl. Popper's placement will
be set accordingly
Type
"ltr" | "rtl"Default
"ltr"gutter
gutterDescription
The distance or margin between the reference and popper.
It is used internally to create an offset modifier.
NB: If you define offset prop, it'll override the gutter.
Type
numberDefault
8hasArrow
hasArrowDescription
If true, the tooltip will show an arrow tip
Type
booleanisDisabled
isDisabledType
booleanisOpen
isOpenDescription
If true, the tooltip will be shown (in controlled mode)
Type
booleanlabel
labelDescription
The label of the tooltip
Type
ReactNodemodifiers
modifiersDescription
Array of popper.js modifiers. Check the docs to see the list of possible modifiers you can pass. @see Docs https://popper.js.org/docs/v2/modifiers/
Type
Partial<Modifier<string, any>>[]motionProps
motionPropsType
HTMLMotionProps<"div">offset
offsetDescription
The main and cross-axis offset to displace popper element from its reference element.
Type
[number, number]onClose
onCloseDescription
Callback to run when the tooltip hides
Type
(() => void)onOpen
onOpenDescription
Callback to run when the tooltip shows
Type
(() => void)openDelay
openDelayDescription
Delay (in ms) before showing the tooltip
Type
numberDefault
0msplacement
placementDescription
The placement of the popper relative to its reference.
Type
PlacementWithLogicalDefault
"bottom"portalProps
portalPropsDescription
Props to be forwarded to the portal component
Type
Pick<PortalProps, "appendToParentPortal" | "containerRef">shouldWrapChildren
shouldWrapChildrenDescription
If true, the tooltip will wrap its children
in a `<span/>` with `tabIndex=0`
Type
booleansize
sizeDescription
Sizes for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
Type
stringvariant
variantDescription
Variants for Tooltip are not implemented in the default theme. You can extend the theme to implement them.
Type
stringThe 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 stylesconst baseStyle = {borderRadius: 'md', // add a border radiusfontWeight: 'normal', // change the font weightborder: '1px solid', // add a border}// export the component themeexport 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 sizesconst 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 themeexport 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 variantconst colorfulVariant = defineStyle((props) => {const { colorScheme: c } = props // add color scheme as a propreturn {_light: {bg: `${c}.300`,borderColor: `${c}.600`,color: `${c}.800`,},_dark: {bg: `${c}.600`,borderColor: `${c}.300`,color: `${c}.200`,},}})// define custom variantsconst variants = {colorful: colorfulVariant,}// export the component themeexport 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 schemecolors: {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 colorScheme='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 defaultconst defaultProps = {size: 'md',variant: 'colorful',colorScheme: 'brand',}// export the component themeexport 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> ); }