Nebula

tooltip

Import

import { Tooltip } from '@xpanseinc/nebula'

Usage

Default

<Tooltip
  content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nat"
>
  <InfoCircleIcon focusable tabIndex={0} size={16} aria-label="More info" />
</Tooltip>

Position

TopRightBottomLeft
<VStack spacing={16} align="flex-start">
  <Tooltip
    content="Base income includes any salary or hourly wages"
    position="top"
  >
    <span>
      Top
    </span>
  </Tooltip>

  <Tooltip
    content="Base income includes any salary or hourly wages"
    position="right"
  >
    <span>
      Right
    </span>
  </Tooltip>

  <Tooltip
    content="Base income includes any salary or hourly wages"
    position="bottom"
  >
    <span>
      Bottom
    </span>
  </Tooltip>

  <Tooltip
    content="Base income includes any salary or hourly wages"
    position="left"
  >
    <span>
      Left
    </span>
  </Tooltip>
</VStack>

Character count

The max character count for a tooltip in 120

<Tooltip
  content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nat"
  position="left"
>
  <InfoCircleIcon focusable tabIndex={0} size={16} aria-label="More info" />
</Tooltip>

Custom content

<Tooltip
  content={<div>You may be eligible for a VA loan.<br></br> <a href="#" css={theme => ({color: theme.color.primary.mid})}><strong>Learn more</strong></a></div>}
>
  <InfoCircleIcon focusable tabIndex={0} size={16} aria-label="More info" />
</Tooltip>

Disabled

<Tooltip
  disabled
  content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nat"
>
  <InfoCircleIcon focusable tabIndex={0} size={16} aria-label="More info" />
</Tooltip>

Tooltip around disabled element

To add a tooltip to a diabled element, add the wrapChildren prop. This will wrap the element in a span, allowing the tooltip to be shown.

<Tooltip
  wrapChildren
  content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nat"
>
  <Button disabled>
    Button
  </Button>
</Tooltip>