Tooltip

分类：

other

日期:

2022-4-23

标签：

chakra

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.

View sourceView theme source@chakra-ui/tooltip

The Tooltip component follows the WAI-ARIA Tooltip Pattern.

Import#

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

Usage#

If the children of Tooltip is a string, we wrap with in a span with tabIndex set to 0, to ensure it meets the accessibility requirements.

Note 🚨: If the Tooltip is wrapping a functional component, ensure that the functional component accepts a ref using forwardRef.

Using custom components#

const CustomCard = React.forwardRef(({ children, ...rest }, ref) => (
  <Box p="1">
    <Tag ref={ref} {...rest}>
      {children}
    </Tag>
  </Box>
));


const CustomToolTip = () => (
  <Tooltip label="Hover me">
    <CustomCard>Tag Here</CustomCard>
  </Tooltip>
);


render(<CustomToolTip />);
<Tooltip label="Hey, I'm here!" aria-label="A tooltip">
  Hover me
</Tooltip>

With an icon#

<Tooltip label="Phone number" fontSize="md">
  <PhoneIcon />
</Tooltip>

Note 🚨: If you're wrapping an icon from react-icons, you need to also wrap the icon in a span element as react-icons icons do not use forwardRef.

With arrow#

<Tooltip hasArrow label="Search places" bg="gray.300" color="black">
  <SearchIcon />
</Tooltip>

Tooltip with focusable content#

If the children of the tooltip is a focusable element, the tooltip will show when you focus or hover on the element, and will hide when you blur or move cursor out of the element.

<Tooltip hasArrow label="Search places" bg="red.600">
  <Button>Button</Button>
</Tooltip>

Disabled Tooltip#

<Tooltip isDisabled>
  <SearchIcon />
</Tooltip>

Tooltip around disabled Button#

By default the Tooltip is not shown when it is around a disabled Button.

<Tooltip hasArrow label="You can not see me">
  <Button isDisabled>Button</Button>
</Tooltip>

To show the Tooltip on a disabled Button you need to provide the shouldWrapChildren prop. This means that the Button is surrounded by a span on which the Tooltip is pinned. You could simply add a margin to the Tooltip to have it more or less 'pinned' on the Button again.

<Tooltip hasArrow label="You can see me" shouldWrapChildren mt="3">
  <Button isDisabled>Button</Button>
</Tooltip>

There's a case where the borderRadius of a button breaks when the button is in a ButtonGroup that has the isAttached prop set, and the tooltip has the shouldWrapChildren prop set. A workaround could be to pass the specific borderRadius depending on the isDisabled prop of the Button.

<ButtonGroup colorScheme="teal" isAttached>
  <Tooltip label="works">
    <Button>1</Button>
  </Tooltip>


  <Tooltip label="messes up border radius" shouldWrapChildren>
    <Button isDisabled>2</Button>
  </Tooltip>


  <Tooltip label="this could be a workaround" shouldWrapChildren>
    <Button isDisabled borderRadius="0">
      3
    </Button>
  </Tooltip>


  <Button>4</Button>
</ButtonGroup>

Placement#

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

<VStack spacing={6}>
  <HStack spacing={6}>
    <Tooltip label="Auto start" placement="auto-start">
      <Button>Auto-Start</Button>
    </Tooltip>


    <Tooltip label="Auto" placement="auto">
      <Button>Auto</Button>
    </Tooltip>


    <Tooltip label="Auto end" placement="auto-end">
      <Button>Auto-End</Button>
    </Tooltip>
  </HStack>


  <HStack spacing={6}>
    <Tooltip label="Top start" placement="top-start">
      <Button>Top-Start</Button>
    </Tooltip>


    <Tooltip label="Top" placement="top">
      <Button>Top</Button>
    </Tooltip>


    <Tooltip label="Top end" placement="top-end">
      <Button>Top-End</Button>
    </Tooltip>
  </HStack>


  <HStack spacing={6}>
    <Tooltip label="Right start" placement="right-start">
      <Button>Right-Start</Button>
    </Tooltip>


    <Tooltip label="Right" placement="right">
      <Button>Right</Button>
    </Tooltip>


    <Tooltip label="Right end" placement="right-end">
      <Button>Right-End</Button>
    </Tooltip>
  </HStack>


  <HStack spacing={6}>
    <Tooltip label="Bottom start" placement="bottom-start">
      <Button>Bottom Start</Button>
    </Tooltip>


    <Tooltip label="Bottom" placement="bottom">
      <Button>Bottom</Button>
    </Tooltip>


    <Tooltip label="Bottom end" placement="bottom-end">
      <Button>Bottom End</Button>
    </Tooltip>
  </HStack>


  <HStack spacing={6}>
    <Tooltip label="Left start" placement="left-start">
      <Button>Left-Start</Button>
    </Tooltip>


    <Tooltip label="Left" placement="left">
      <Button>Left</Button>
    </Tooltip>


    <Tooltip label="Left end" placement="left-end">
      <Button>Left-End</Button>
    </Tooltip>
  </HStack>
</VStack>

More examples#

<Wrap spacing={6}>
  <WrapItem>
    <Tooltip label="I close on click">
      <Button>Close on Click - true(default)</Button>
    </Tooltip>
  </WrapItem>


  <WrapItem>
    <Tooltip label="I don't close on click" closeOnClick={false}>
      <Button>Close on Click - false</Button>
    </Tooltip>
  </WrapItem>


  <WrapItem>
    <Tooltip label="I am always open" placement="top" isOpen>
      <Button>Always Open</Button>
    </Tooltip>
  </WrapItem>


  <WrapItem>
    <Tooltip label="I am open by default" placement="left" defaultIsOpen>
      <Button>Open on startup</Button>
    </Tooltip>
  </WrapItem>


  <WrapItem>
    <Tooltip label="Opened after 500ms" openDelay={500}>
      <Button>Delay Open - 500ms</Button>
    </Tooltip>
  </WrapItem>


  <WrapItem>
    <Tooltip label="Closed after 500ms" closeDelay={500}>
      <Button>Delay Close - 500ms</Button>
    </Tooltip>
  </WrapItem>


  <WrapItem>
    <Tooltip label="I have 15px arrow" hasArrow arrowSize={15}>
      <Button>Arrow size - 15px</Button>
    </Tooltip>
  </WrapItem>
</Wrap>

Props#

children

The React component to use as the trigger for the tooltip

ReactNode

aria-label

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

string

arrowPadding

The padding required to prevent the arrow from reaching the very edge of the popper.

number
8

arrowShadowColor

string

arrowSize

number
10

closeDelay

Delay (in ms) before hiding the tooltip

number
0ms

closeOnClick

If true, the tooltip will hide on click

boolean
true

closeOnEsc

If true, the tooltip will hide on pressing Esc key

boolean
true

closeOnMouseDown

If true, the tooltip will hide while the mouse is down

boolean

colorScheme

Color Schemes Tooltip

(string & {})

defaultIsOpen

If true, the tooltip will be initially shown

boolean

direction

Theme direction ltr or rtl. Popper's placement will be set accordingly

"ltr" | "rtl"
"ltr"

gutter

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.

number
8

hasArrow

If true, the tooltip will show an arrow tip

boolean

isDisabled

boolean

isOpen

If true, the tooltip will be shown (in controlled mode)

boolean

label

The label of the tooltip

ReactNode

modifiers

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/

Partial<Modifier<string, any>>[]

offset

The main and cross-axis offset to displace popper element from its reference element.

[number, number]

onClose

Callback to run when the tooltip hides

(() => void)

onOpen

Callback to run when the tooltip shows

(() => void)

openDelay

Delay (in ms) before showing the tooltip

number
0ms

placement

The placement of the popper relative to its reference.

PlacementWithLogical
"bottom"

portalProps

Props to be forwarded to the portal component

Pick<PortalProps, "appendToParentPortal" | "containerRef">

shouldWrapChildren

If true, the tooltip will wrap its children in a `<span/>` with `tabIndex=0`

boolean

size

Sizes Tooltip

string

variant

Variants Tooltip

string
footer logo

© 2022 Designed with chakra ui. Powered by contentlayerjs and nextjs etc. All rights reserved

TwitterYouTubeGithub