Overlay Components

/**
 * Modal component for dialog overlays
 * @param show - Show/hide state
 * @param onHide - Hide handler
 * @param size - Modal size
 * @param fullscreen - Fullscreen mode
 * @param centered - Center vertically
 * @param backdrop - Backdrop behavior
 * @param keyboard - Keyboard close support
 */
function Modal(props: ModalProps): JSX.Element;

interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Show/hide state */
  show?: boolean;
  /** Hide handler */
  onHide?: () => void;
  /** Modal size */
  size?: "sm" | "lg" | "xl";
  /** Fullscreen mode */
  fullscreen?: boolean | "sm-down" | "md-down" | "lg-down" | "xl-down" | "xxl-down";
  /** Center vertically */
  centered?: boolean;
  /** Backdrop behavior */
  backdrop?: boolean | "static";
  /** Keyboard close support */
  keyboard?: boolean;
  /** Scroll behavior */
  scrollable?: boolean;
  /** Animation */
  animation?: boolean;
  /** Auto focus */
  autoFocus?: boolean;
  /** Enforce focus */
  enforceFocus?: boolean;
  /** Restore focus */
  restoreFocus?: boolean;
  /** Show handler */
  onShow?: () => void;
  /** Enter handler */
  onEnter?: () => void;
  /** Entering handler */
  onEntering?: () => void;
  /** Entered handler */
  onEntered?: () => void;
  /** Exit handler */
  onExit?: () => void;
  /** Exiting handler */
  onExiting?: () => void;
  /** Exited handler */
  onExited?: () => void;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * ModalHeader component for modal headers
 * @param closeButton - Show close button
 * @param onHide - Close handler
 */
function ModalHeader(props: ModalHeaderProps): JSX.Element;

interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Show close button */
  closeButton?: boolean;
  /** Close handler */
  onHide?: () => void;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * ModalBody component for modal body content
 */
function ModalBody(props: ModalBodyProps): JSX.Element;

interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * ModalFooter component for modal footers
 */
function ModalFooter(props: ModalFooterProps): JSX.Element;

interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * ModalTitle component for modal titles
 */
function ModalTitle(props: ModalTitleProps): JSX.Element;

interface ModalTitleProps extends React.HTMLAttributes<HTMLElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Modal, Button } from "react-bootstrap";

function ModalExample() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          Woohoo, you're reading this text in a modal!
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

// Centered modal
<Modal show={show} onHide={handleClose} centered>
  <Modal.Header closeButton>
    <Modal.Title>Centered Modal</Modal.Title>
  </Modal.Header>
  <Modal.Body>This modal is vertically centered.</Modal.Body>
</Modal>

// Large modal
<Modal size="lg" show={show} onHide={handleClose}>
  <Modal.Header closeButton>
    <Modal.Title>Large Modal</Modal.Title>
  </Modal.Header>
  <Modal.Body>This is a large modal.</Modal.Body>
</Modal>

// Fullscreen modal
<Modal show={show} fullscreen onHide={handleClose}>
  <Modal.Header closeButton>
    <Modal.Title>Fullscreen Modal</Modal.Title>
  </Modal.Header>
  <Modal.Body>This modal is fullscreen.</Modal.Body>
</Modal>

/**
 * Tooltip component for contextual information
 * @param id - Unique identifier
 * @param placement - Tooltip placement
 */
function Tooltip(props: TooltipProps): JSX.Element;

interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Unique identifier */
  id: string;
  /** Tooltip placement */
  placement?: "auto" | "top" | "bottom" | "left" | "right";
  /** Arrow visibility */
  arrowProps?: any;
  /** Show state */
  show?: boolean;
  /** Popper configuration */
  popper?: any;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Tooltip, OverlayTrigger, Button } from "react-bootstrap";

// Basic tooltip
<OverlayTrigger
  placement="right"
  delay={{ show: 250, hide: 400 }}
  overlay={<Tooltip id="button-tooltip">Simple tooltip</Tooltip>}
>
  <Button variant="success">Hover me to see tooltip</Button>
</OverlayTrigger>

// Tooltip with HTML content
<OverlayTrigger
  placement="top"
  overlay={
    <Tooltip id="tooltip-top">
      <strong>Holy guacamole!</strong> Check this info.
    </Tooltip>
  }
>
  <Button variant="secondary">Tooltip on top</Button>
</OverlayTrigger>

/**
 * Popover component for rich contextual information
 * @param id - Unique identifier
 * @param placement - Popover placement
 * @param title - Popover title
 */
function Popover(props: PopoverProps): JSX.Element;

interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Unique identifier */
  id: string;
  /** Popover placement */
  placement?: "auto" | "top" | "bottom" | "left" | "right";
  /** Popover title */
  title?: React.ReactNode;
  /** Arrow visibility */
  arrowProps?: any;
  /** Show state */
  show?: boolean;
  /** Popper configuration */
  popper?: any;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * PopoverHeader component for popover headers
 */
function PopoverHeader(props: PopoverHeaderProps): JSX.Element;

interface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * PopoverBody component for popover bodies
 */
function PopoverBody(props: PopoverBodyProps): JSX.Element;

interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Popover, OverlayTrigger, Button } from "react-bootstrap";

const popover = (
  <Popover id="popover-basic">
    <Popover.Header as="h3">Popover right</Popover.Header>
    <Popover.Body>
      And here's some <strong>amazing</strong> content. It's very engaging. Right?
    </Popover.Body>
  </Popover>
);

<OverlayTrigger trigger="click" placement="right" overlay={popover}>
  <Button variant="success">Click me to see popover</Button>
</OverlayTrigger>

/**
 * Offcanvas component for slide-out panels
 * @param show - Show/hide state
 * @param onHide - Hide handler
 * @param placement - Panel placement
 * @param backdrop - Backdrop behavior
 * @param keyboard - Keyboard close support
 * @param scroll - Body scroll behavior
 */
function Offcanvas(props: OffcanvasProps): JSX.Element;

interface OffcanvasProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Show/hide state */
  show?: boolean;
  /** Hide handler */
  onHide?: () => void;
  /** Panel placement */
  placement?: "start" | "end" | "top" | "bottom";
  /** Backdrop behavior */
  backdrop?: boolean | "static";
  /** Keyboard close support */
  keyboard?: boolean;
  /** Body scroll behavior */
  scroll?: boolean;
  /** Auto focus */
  autoFocus?: boolean;
  /** Enforce focus */
  enforceFocus?: boolean;
  /** Restore focus */
  restoreFocus?: boolean;
  /** Show handler */
  onShow?: () => void;
  /** Enter handler */
  onEnter?: () => void;
  /** Entering handler */
  onEntering?: () => void;
  /** Entered handler */
  onEntered?: () => void;
  /** Exit handler */
  onExit?: () => void;
  /** Exiting handler */
  onExiting?: () => void;
  /** Exited handler */
  onExited?: () => void;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * OffcanvasHeader component for offcanvas headers
 * @param closeButton - Show close button
 * @param onHide - Close handler
 */
function OffcanvasHeader(props: OffcanvasHeaderProps): JSX.Element;

interface OffcanvasHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Show close button */
  closeButton?: boolean;
  /** Close handler */
  onHide?: () => void;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * OffcanvasBody component for offcanvas bodies
 */
function OffcanvasBody(props: OffcanvasBodyProps): JSX.Element;

interface OffcanvasBodyProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

/**
 * OffcanvasTitle component for offcanvas titles
 */
function OffcanvasTitle(props: OffcanvasTitleProps): JSX.Element;

interface OffcanvasTitleProps extends React.HTMLAttributes<HTMLElement> {
  /** Component used for the root node */
  as?: React.ElementType;
  /** Bootstrap CSS class prefix */
  bsPrefix?: string;
}

import { Offcanvas, Button } from "react-bootstrap";

function OffcanvasExample() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch offcanvas
      </Button>

      <Offcanvas show={show} onHide={handleClose}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

// Offcanvas from different sides
<Offcanvas show={show} onHide={handleClose} placement="end">
  <Offcanvas.Header closeButton>
    <Offcanvas.Title>Offcanvas from right</Offcanvas.Title>
  </Offcanvas.Header>
  <Offcanvas.Body>Content from the right side.</Offcanvas.Body>
</Offcanvas>

/**
 * OverlayTrigger component for triggering overlays
 * @param trigger - Trigger events
 * @param placement - Overlay placement
 * @param delay - Show/hide delays
 * @param show - Controlled show state
 * @param overlay - Overlay component
 */
function OverlayTrigger(props: OverlayTriggerProps): JSX.Element;

interface OverlayTriggerProps {
  /** Trigger events */
  trigger?: "hover" | "click" | "focus" | Array<"hover" | "click" | "focus">;
  /** Overlay placement */
  placement?: "auto" | "top" | "bottom" | "left" | "right";
  /** Show/hide delays */
  delay?: number | { show: number; hide: number };
  /** Controlled show state */
  show?: boolean;
  /** Default show state */
  defaultShow?: boolean;
  /** Show handler */
  onToggle?: (show: boolean) => void;
  /** Overlay component */
  overlay: React.ReactElement;
  /** Target element */
  target?: React.RefObject<Element>;
  /** Container element */
  container?: React.ComponentType | Element | (() => Element);
  /** Flip behavior */
  flip?: boolean;
  /** Popover container props */
  popperConfig?: any;
  /** Root close behavior */
  rootClose?: boolean;
  /** Root close event */
  rootCloseEvent?: "click" | "mousedown";
  /** Children element */
  children: React.ReactElement;
}

import { OverlayTrigger, Tooltip, Popover, Button } from "react-bootstrap";

// Tooltip trigger
<OverlayTrigger
  placement="top"
  delay={{ show: 250, hide: 400 }}
  overlay={<Tooltip id="button-tooltip">Tooltip text</Tooltip>}
>
  <Button variant="success">Hover for tooltip</Button>
</OverlayTrigger>

// Popover trigger
<OverlayTrigger
  trigger="click"
  placement="bottom"
  overlay={
    <Popover id="popover-positioned-bottom">
      <Popover.Header>Popover bottom</Popover.Header>
      <Popover.Body>
        <strong>Holy guacamole!</strong> Check this info.
      </Popover.Body>
    </Popover>
  }
>
  <Button variant="danger">Click for popover</Button>
</OverlayTrigger>

// Multiple triggers
<OverlayTrigger
  trigger={['hover', 'focus']}
  placement="right"
  overlay={<Tooltip id="multi-trigger-tooltip">Multiple triggers</Tooltip>}
>
  <Button variant="outline-secondary">Hover or focus</Button>
</OverlayTrigger>