Components

Tooltip

<Tooltip />

Renders Tooltip

Usage

import { Tooltip, TooltipContent } from '@admin-bro/design-system'

// Wrapping existing element with a tooltip
return (
  <Box>
    <Tooltip title="I am tooltip">
      <Button>I am tooltip</Button>
    </Tooltip>
  </Box>
)

// Adding more complicated content
return (
  <Box>
    <Tooltip>
      <TooltipContent>
        <Text>I am text inside with <strong>BoldedText</strong></Text>
      </TooltipContent>
      <Button>I am tooltip</Button>
    </Tooltip>
  </Box>
)

As you can see on the examples, there are 2 ways of passing tooltip message:

  1. by the title prop
  2. by the TooltipContent component

The first way is the easiest, but the second allows you to put whatever styled content you like.

Props

The Tooltip Component takes 3 custom props:

  • title
  • direction - default to bottom
  • size

See TooltipProps below.

Example

  1. Direction and title

New:
  • In version 3.3

View Source admin-bro-design-system/src/atoms/tooltip/tooltip.tsx, line 15

Classes

Type Definitions

object

# TooltipProps

Props passed to the Tooltip component.

Properties:
Name Type Attributes Description
title string <optional>

Text shown on the tooltip

direction DirectionProps

Direction of tooltip

size 'default' | 'lg' <optional>

Tooltip size

View Source admin-bro-design-system/src/atoms/tooltip/tooltip-props.ts, line 6

SoftwareBrothers

Proudly built and maintained by SoftwareBrothers

Software House with a passion for both JavaScript and TypeScript.

See what we do See what we believe in

Proudly built and maintained by

SoftwareBrothers