Tooltip

@coinbase/cds-web@8.28.1

A component that displays additional information on hover.

Import

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

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Related components

• Modal,
• Alert,
• Toast

---

󰏖

View as Markdown

󰔂

Default color inversion

Tooltip surfaces automatically flip the active color scheme (via invertColorScheme, which defaults to true) so the overlay background has high contrast against the surrounding UI. Set invertColorScheme={false} on either the web or mobile Tooltip if you need the content to inherit the current theme and ensure your custom colors still meet contrast guidelines.

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" tabIndex={0} />
        </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} tabIndex={0} />
        </Tooltip>
      </Box>
    </VStack>
  );
}

Opt out of color inversion

Tooltips invert the current color scheme by default. Pass invertColorScheme={false} to keep the tooltip aligned with the surrounding surface and supply your preferred elevation/background tokens.

Loading...

󰙡

Live Code

function TooltipColorSchemeOptOut() {
  return (
    <Box justifyContent="center">
      <Tooltip content="Matches the surrounding surface" invertColorScheme={false}>
        <Button>Keep current theme</Button>
      </Tooltip>
    </Box>
  );
}

Tooltip in TextInput

You can use tooltips within TextInput to provide more context.

Loading...

󰙡

Live Code

<TextInput
  id="tooltip-input-example"
  label="Display name"
  labelNode={
    <InputLabel htmlFor="tooltip-input-example">
      <HStack alignItems="center" gap={1}>
        Display name
        <Tooltip content="This will be visible to other users.">
          <Icon active color="fg" name="info" size="xs" tabIndex={0} />
        </Tooltip>
      </HStack>
    </InputLabel>
  }
  placeholder="Satoshi Nakamoto"
/>