abaabil.popover

Popover Component

The Popover component is a versatile and customizable tooltip-like overlay 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 Popover from './path-to-popover';
import Button from 'abaabil.button';

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

export default App;

Props

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

Positions

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

Sizes

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

Example

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

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

export default Example;

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