Skip to main content

​
Overview

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

​
Basic Usage

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

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

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