Tooltip

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 or keyboard-hover action.

The Tooltip component follows the WAI-ARIA Tooltip pattern.

Import

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

Usage

If the tooltip anchor is not a focusable content, just like the text string, you can wrap it with a Text component and set `tabIndex="0" to make it focusable.


EDITABLE EXAMPLE
<Tooltip label="Hey, I'm here!">
  <Text tabIndex="0">Hover me</Text>
</Tooltip><Tooltip label="Hey, I'm here!">
  <Text tabIndex="0">Hover me</Text>
</Tooltip>

With an icon


EDITABLE EXAMPLE
<Tooltip label="Show calendar" placement="left">
  <Icon cursor="pointer" icon="calendar" />
</Tooltip><Tooltip label="Show calendar" placement="left">
  <Icon cursor="pointer" icon="calendar" />
</Tooltip>

Hide the arrow


EDITABLE EXAMPLE
<Tooltip hideArrow label="Search places" placement="top">
  <Icon cursor="pointer" icon="search-o" />
</Tooltip><Tooltip hideArrow label="Search places" placement="top">
  <Icon cursor="pointer" icon="search-o" />
</Tooltip>

Tooltip with focusable content

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


EDITABLE EXAMPLE
<Tooltip label="Search places" placement="top">
  <Button>Button</Button>
</Tooltip><Tooltip label="Search places" placement="top">
  <Button>Button</Button>
</Tooltip>

Customized tooltips


EDITABLE EXAMPLE
<Tooltip
  hideArrow
  backgroundColor="gray:90"
  color="white"
  p="4x"
  placement="right"
  width="auto"
  label={
    <Stack direction="column">
      <Text fontSize="lg" lineHeight="lg">Tooltip with HTML</Text>
      <Box><em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}</Box>
      <Text>{"It's very engaging. Right?"}</Text>
    </Stack>
  }
>
  <Button variant="ghost">HTML</Button>
</Tooltip><Tooltip
  hideArrow
  backgroundColor="gray:90"
  color="white"
  p="4x"
  placement="right"
  width="auto"
  label={
    <Stack direction="column">
      <Text fontSize="lg" lineHeight="lg">Tooltip with HTML</Text>
      <Box><em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}</Box>
      <Text>{"It's very engaging. Right?"}</Text>
    </Stack>
  }
>
  <Button variant="ghost">HTML</Button>
</Tooltip>

Tooltip with `Menu`


EDITABLE EXAMPLE
function Example() {
  const [colorMode] = useColorMode();
  const inputRef = React.useRef();
  const [menuItem, setMenuItem] = React.useState('hostname');
  const handleMenuClick = (event) => {
    // [optional] persist `Synthetic Event` for React v16 and earlier versions
    event.persist();

    const { value } = event.target.attributes.value;
    setMenuItem(value);

    setTimeout(() => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    }, 0);
  };

  return (
    <InputGroup>
      <InputGroupPrepend>
        <Menu>
          <MenuButton>
            <Box
              color={colorMode === 'dark' ? 'white:secondary' : 'black:secondary'}
              mr="2x"
            >
              Search by:
            </Box>
            {{
              'hostname': 'Endpoint name',
              'filename': 'File name',
            }[menuItem]}
          </MenuButton>
          <MenuList
            onClick={handleMenuClick}
          >
            <MenuItem value="hostname">Endpoint name</MenuItem>
            <MenuItem value="filename">File name</MenuItem>
          </MenuList>
        </Menu>
      </InputGroupPrepend>
      <Tooltip
        backgroundColor="gray:80"
        color="gray:20"
        px="2x"
        py="3x"
        arrowAt="left"
        placement="bottom-start"
        label="Use commas to separate multiple keywords"
      >
        <Input
          ref={inputRef}
          borderTopLeftRadius={0}
          borderBottomLeftRadius={0}
          placeholder={{
            'hostname': 'John Doe, Jane',
            'filename': 'README.md, *.cmd',
          }[menuItem]}
        />
      </Tooltip>
    </InputGroup>
  );
}function Example() {
  const [colorMode] = useColorMode();
  const inputRef = React.useRef();
  const [menuItem, setMenuItem] = React.useState('hostname');
  const handleMenuClick = (event) => {
    // [optional] persist `Synthetic Event` for React v16 and earlier versions
    event.persist();

    const { value } = event.target.attributes.value;
    setMenuItem(value);

    setTimeout(() => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    }, 0);
  };

  return (
    <InputGroup>
      <InputGroupPrepend>
        <Menu>
          <MenuButton>
            <Box
              color={colorMode === 'dark' ? 'white:secondary' : 'black:secondary'}
              mr="2x"
            >
              Search by:
            </Box>
            {{
              'hostname': 'Endpoint name',
              'filename': 'File name',
            }[menuItem]}
          </MenuButton>
          <MenuList
            onClick={handleMenuClick}
          >
            <MenuItem value="hostname">Endpoint name</MenuItem>
            <MenuItem value="filename">File name</MenuItem>
          </MenuList>
        </Menu>
      </InputGroupPrepend>
      <Tooltip
        backgroundColor="gray:80"
        color="gray:20"
        px="2x"
        py="3x"
        arrowAt="left"
        placement="bottom-start"
        label="Use commas to separate multiple keywords"
      >
        <Input
          ref={inputRef}
          borderTopLeftRadius={0}
          borderBottomLeftRadius={0}
          placeholder={{
            'hostname': 'John Doe, Jane',
            'filename': 'README.md, *.cmd',
          }[menuItem]}
        />
      </Tooltip>
    </InputGroup>
  );
}

Placement

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


EDITABLE EXAMPLE
<Stack direction="column" spacing="2rem">
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Tooltip label="Top" placement="top">
      <Button minWidth="32x">Top</Button>
    </Tooltip>
    <Tooltip label="Top start" placement="top-start">
      <Button minWidth="32x">Top-Start</Button>
    </Tooltip>
    <Tooltip label="Top end" placement="top-end">
      <Button minWidth="32x">Top-End</Button>
    </Tooltip>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Tooltip label="Right" placement="right">
      <Button minWidth="32x">Right</Button>
    </Tooltip>
    <Tooltip label="Right start" placement="right-start">
      <Button minWidth="32x">Right-Start</Button>
    </Tooltip>
    <Tooltip label="Right end" placement="right-end">
      <Button minWidth="32x">Right-End</Button>
    </Tooltip>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Tooltip label="Bottom" placement="bottom">
      <Button minWidth="32x">Bottom</Button>
    </Tooltip>
    <Tooltip label="Bottom start" placement="bottom-start">
      <Button minWidth="32x">Bottom-Start</Button>
    </Tooltip>
    <Tooltip label="Bottom end" placement="bottom-end">
      <Button minWidth="32x">Bottom-End</Button>
    </Tooltip>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Tooltip label="Left" placement="left">
      <Button minWidth="32x">Left</Button>
    </Tooltip>
    <Tooltip label="Left start" placement="left-start">
      <Button minWidth="32x">Left-Start</Button>
    </Tooltip>
    <Tooltip label="Left end" placement="left-end">
      <Button minWidth="32x">Left-End</Button>
    </Tooltip>
  </Stack>
</Stack><Stack direction="column" spacing="2rem">
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Tooltip label="Top" placement="top">
      <Button minWidth="32x">Top</Button>
    </Tooltip>
    <Tooltip label="Top start" placement="top-start">
      <Button minWidth="32x">Top-Start</Button>
    </Tooltip>
    <Tooltip label="Top end" placement="top-end">
      <Button minWidth="32x">Top-End</Button>
    </Tooltip>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Tooltip label="Right" placement="right">
      <Button minWidth="32x">Right</Button>
    </Tooltip>
    <Tooltip label="Right start" placement="right-start">
      <Button minWidth="32x">Right-Start</Button>
    </Tooltip>
    <Tooltip label="Right end" placement="right-end">
      <Button minWidth="32x">Right-End</Button>
    </Tooltip>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Tooltip label="Bottom" placement="bottom">
      <Button minWidth="32x">Bottom</Button>
    </Tooltip>
    <Tooltip label="Bottom start" placement="bottom-start">
      <Button minWidth="32x">Bottom-Start</Button>
    </Tooltip>
    <Tooltip label="Bottom end" placement="bottom-end">
      <Button minWidth="32x">Bottom-End</Button>
    </Tooltip>
  </Stack>
  <Stack shouldWrapChildren direction="row" spacing="2rem">
    <Tooltip label="Left" placement="left">
      <Button minWidth="32x">Left</Button>
    </Tooltip>
    <Tooltip label="Left start" placement="left-start">
      <Button minWidth="32x">Left-Start</Button>
    </Tooltip>
    <Tooltip label="Left end" placement="left-end">
      <Button minWidth="32x">Left-End</Button>
    </Tooltip>
  </Stack>
</Stack>

Props

Name	Type	Default	Description
isOpen	boolean		If `true`, the tooltip is shown.
label	string \| ReactNode		The label of the tooltip.
placement	PopperJS.Placement	'bottom'	Position the tooltip relative to the trigger element as well as surrounding elements. Possible values: `'top'`, `'bottom'`, `'right'`, `'left'`, `'top-start'`, `'top-end'`, `'bottom-start'`, `'bottom-end'`, `'right-start'`, `'right-end'`, `'left-start'`, `'left-end'`
children	ReactNode		The `ReactNode` element to be used as the trigger of the tooltip.
hideArrow	boolean		If `true`, hide the arrow tip on the tooltip.
arrowAt	string		The arrow is at the position of the popover. Possible values: `'left'`, `'right'`, `'top'`, `'bottom'`
showDelay	number		The delay in milliseconds for the tooltip to show.
hideDelay	number		The delay in milliseconds for the tooltip to hide.
closeOnClick	boolean		If `true`, hide the tooltip when the trigger is clicked.
onOpen	function		A callback called when the tooltip shows.
onClose	function		A callback called when the tooltip hides.