abaabil.tooltip

Tooltip Component

The Tooltip component is a versatile and customizable tooltip component built with React. It supports different positions, sizes, and variants, making it suitable for a wide range of use cases.

Usage

import * as React from 'react';
import Tooltip from './path-to-tooltip';
import Button from 'abaabil.button';

const App = () => (
  <div>
    <Tooltip content="This is a tooltip" position="top" variant="primary" size="df">
      <Button>Hover over me</Button>
    </Tooltip>
  </div>
);

export default App;

Props

Prop	Type	Default	Description
children	node	null	The trigger element for the tooltip.
content	node	null	The content to display inside the tooltip.
position	string	top	The position of the tooltip relative to the trigger element. Can be top, bottom, left, or right.
variant	string	primary	The tooltip variant. Can be primary.
size	string	md	The size of the tooltip. Can be cp, md, or sp.
...props	object	{}	Additional props to pass to the tooltip element.

Positions

• top: Displays the tooltip above the trigger element.
• bottom: Displays the tooltip below the trigger element.
• left: Displays the tooltip to the left of the trigger element.
• right: Displays the tooltip to the right of the trigger element.

Sizes

• cp: Small tooltip size.
• md: Medium tooltip size.
• sp: Large tooltip size.

Example

import * as React from 'react';
import Tooltip from './path-to-tooltip';
import Button from 'abaabil.button';

const Example = () => (
  <div>
    <Tooltip content="This is a top tooltip" position="top" variant="primary" size="df">
      <Button>Top Tooltip</Button>
    </Tooltip>
    <Tooltip content="This is a bottom tooltip" position="bottom" variant="primary" size="sp">
      <Button>Bottom Tooltip</Button>
    </Tooltip>
    <Tooltip content="This is a left tooltip" position="left" variant="primary" size="cp">
      <Button>Left Tooltip</Button>
    </Tooltip>
    <Tooltip content="This is a right tooltip" position="right" variant="primary" size="df">
      <Button>Right Tooltip</Button>
    </Tooltip>
  </div>
);

export default Example;

This example demonstrates various ways to use the Tooltip component, showcasing different positions, sizes, and states.