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

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
triggerClassName	string	' '	You can customise by passing tailwind classes.
size	PopoverSize	PopoverSize.MD	You can pass size of the popover.
side	top \| bottom \| right \| left	bottom	You can pass side to popover.
align	start \| end \| center	end	You can pass align to popover.
trigger	string \| ReactNode	Required	You can pass trigger to popover.
children	string \| ReactNode	Required	You can pass popover content as children.

# Usage

import { NPopover, NButton, PopoverSize } from 'nayan';

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-text">Documentation</div>
        <div className="text-sm text-muted">Start integrating products and tools</div>
      </div>
    </NPopover>
  );
};

export default Popover;