Tooltip - DevReady Kit

Overview

The Tooltip component displays contextual information on hover or focus with automatic positioning, arrow support, and customizable placement.

Basic Usage

Code
Preview

import { Tooltip } from '@peppermint-design/devreadykit-custom';
import { Button } from '@peppermint-design/devreadykit-custom';

export default function TooltipBasic() {
  return (
    <Tooltip title="This is a tooltip">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

With Description

Code
Preview

import { Tooltip } from '@peppermint-design/devreadykit-custom';
import { Button } from '@peppermint-design/devreadykit-custom';

<Tooltip 
  title="Tooltip title"
  description="Additional description text"
>
  <Button>Hover for details</Button>
</Tooltip>

Placement

Code
Preview

import { Tooltip } from '@peppermint-design/devreadykit-custom';
import { Button } from '@peppermint-design/devreadykit-custom';

<Tooltip title="Top" placement="top">
  <Button>Top</Button>
</Tooltip>

<Tooltip title="Bottom" placement="bottom">
  <Button>Bottom</Button>
</Tooltip>

<Tooltip title="Left" placement="left">
  <Button>Left</Button>
</Tooltip>

<Tooltip title="Right" placement="right">
  <Button>Right</Button>
</Tooltip>

Props