Popover

Name: Nayan UI
Author: Nayan UI

A Popover component is a UI element that displays additional information or actions when users interact with a specific trigger, such as a button or link. It typically appears as a small overlay or tooltip that provides context, tips, or options without navigating away from the current page. Popovers enhance user experience by offering relevant content in a concise format while maintaining focus on the main interface.

Demo

Usage

import { NPopover, NButton, PopoverSize } from '@nayan-ui/react';

const Popover = () => {
  return (
    <NPopover size={PopoverSize.MD} trigger={<NButton>Show Popover</NButton>}>
      <div className="overflow-hidden p-3">
        <div className="text-sm font-medium text-foreground">Documentation</div>
        <div className="text-sm text-muted">Start integrating products and tools</div>
      </div>
    </NPopover>
  );
};

export default Popover;

Attributes

Name	Type	Default	Details
size	PopoverSize	Optional	Size of the popover.
className	string	' '	You can customise by passing tailwind classes.
triggerClassName	string	' '	You can customise by passing tailwind classes.
trigger	React.ReactElement	Required	Trigger element for the popover.
children	React.ReactNode	Required	Popover content.
side	'top' \| 'bottom' \| 'right' \| 'left'	Optional	Side where popover appears.
align	'start' \| 'end' \| 'center'	Optional	Alignment of the popover.
popoverId	string	Optional	ID for the popover.
popoverLabel	string	Optional	Label for the popover.
triggerProps	React.HTMLAttributes<HTMLElement>	Optional	Props for trigger element.
contentProps	React.HTMLAttributes<HTMLDivElement>	Optional	Props for content element.

Popover

Demo

Usage

Attributes

Tags