Back to Fluentui

PopoverBestPractices

packages/react-components/react-popover/stories/src/Popover/PopoverBestPractices.md

4.40.2-hotfix2503 B
Original Source

Best practices

Do

  • Use the trapFocus prop when focusable elements are in the Popover.
  • Create nested Popovers as separate components.
  • If there are no interactive items in the Popover content, set tabIndex={-1} on the PopoverSurface.
  • Use Popover to reduce screen clutter to host non-essential information.

Don't

  • Don't use more than 2 levels of nested Popovers.
  • Don't use Popovers to display too much content, consider if that content should be on the main page.