Popover

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.

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

const Popover = () => {
  return (
    <div>
      <NPopover size={PopoverSize.MD} trigger={<NButton>Open Popover</NButton>}>
        <div className="p-3">
          <p className="text-foreground">This is popover content.</p>
        </div>
      </NPopover>
    </div>
  );
};

export default Popover;