Tooltip

@coinbase/cds-web@8.13.6

A component that displays additional information on hover.

Import

import { Tooltip } from '@coinbase/cds-web/overlays/Tooltip'

SourceView source codeStorybookView StorybookFigmaView Figma

---

Related components

• Modal,
• Alert,
• Toast

Placement

Loading...

󰙡

Live Code

function TooltipPlacement() {
  const content = 'This is the tooltip Content';
  return (
    <HStack spacingHorizontal={2} gap={2} justifyContent="space-around">
      <Tooltip content={content}>
        <Button>Default</Button>
      </Tooltip>
      <Tooltip content={content} placement="top">
        <Button>Top</Button>
      </Tooltip>
      <Tooltip content={content} placement="left">
        <Button>Left</Button>
      </Tooltip>
      <Tooltip content={content} placement="right">
        <Button>Right</Button>
      </Tooltip>
      <Tooltip content={content} placement="bottom">
        <Button>Bottom</Button>
      </Tooltip>
    </HStack>
  );
}

Positioning

Sometimes you may want to use a tooltip with an absolute positioned element.

To ensure the tooltip is properly aligned, you should instead set the position prop on the tooltip.

Loading...

󰙡

Live Code

function TooltipPosition() {
  const content = 'This is the tooltip Content';
  return (
    <VStack gap={2}>
      <Box position="relative">
        Set your default display currency.
        <Tooltip content="I am not centered horizontally">
          <Icon active color="fg" name="info" paddingStart={1} position="absolute" />
        </Tooltip>
      </Box>
      <Box position="relative">
        Set your default display currency.
        <Tooltip content="I am centered horizontally" position="absolute">
          <Icon active color="fg" name="info" paddingStart={1} />
        </Tooltip>
      </Box>
    </VStack>
  );
}