@illa-design/popover v1.3.0

Popover

Popover is a dialog that floats around a trigger. It is used to display contextual information to the user.

Installation

yarn add @illa-design/popover

Import component

import { Popover } from "@illa-design/popover"

API

Popover Basic Properties

Popover Events

Example

Basic usage

<Popover title="This is title" content="Popover">
  <Button>Popover</Button>
</Popover>

Set popup position

<Popover title="This is title" content="Popover" position="top">
  <Button>Popover</Button>
</Popover>

Set popup's background color

<Popover
  title="This is title"
  content="Popover"
  position="top"
  colorScheme="cyan"
>
  <Button>Popover</Button>
</Popover>

Set arrow

<Popover
  title="This is title"
  content="Popover"
  position="top"
  colorScheme="cyan"
  showArrow={false}
>
  <Button>Popover</Button>
</Popover>

Show close icon

<Popover
  title="This is title"
  content="Popover"
  position="top"
  colorScheme="cyan"
  hasCloseIcon
>
  <Button>Popover</Button>
</Popover>

Set popup's default visibility status

<Popover
  title="This is title"
  content="Popover"
  position="top"
  colorScheme="cyan"
  defaultPopupVisible
>
  <Button>Popover</Button>
</Popover>

Set popup's delay time to open

<Popover
  title="This is title"
  content="Popover"
  position="top"
  colorScheme="cyan"
  openDelay={1000}
  closeDelay={1000}
>
  <Button>Popover</Button>
</Popover>