v4.2.12

Popover

Display popover section relative to given target element
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

import { useState } from 'react';
import { Popover, Text, Button, Image } from '@mantine/core';


function Demo() {
  const [opened, setOpened] = useState(false);
  return (
    <Popover
      opened={opened}
      onClose={() => setOpened(false)}
      target={<Button onClick={() => setOpened((o) => !o)}>Toggle popover</Button>}
      width={260}
      position="bottom"
      withArrow
    >
      <div style={{ display: 'flex' }}>
        <Image
          src="./logo.svg"
          width={30}
          height={30}
          sx={{ minWidth: 30 }}
          mr="md"
        />
        <Text size="sm">Thanks for stopping by and checking Mantine, you are awesome!</Text>
      </div>
    </Popover>
  );
}

Examples

Show on focus

This example uses onFocusCapture and onBlurCapture events on Popover component to determine if any element inside has focus:

Strong password should include letters in lower and uppercase, at least 1 number, at least 1 special symbol

With form

By default, focus trap inside popover is active, you can place forms inside and focus will be kept inside popover:

BH
Bob Handsome
bob@handsome.inc

Show on hover

To show popover on hover add onMouseEnter and onMouseLeave handlers to element that should trigger popover. Note that in this case you have to disable focus trap with trapFocus={false}:

Hover badge to see popover
import { useState } from 'react';
import { Popover, Badge, Image, Text } from '@mantine/core';


function Demo() {
  const [opened, setOpened] = useState(false);


  return (
    <Popover
      opened={opened}
      onClose={() => setOpened(false)}
      position="bottom"
      placement="center"
      withArrow
      trapFocus={false}
      closeOnEscape={false}
      transition="pop-top-left"
      width={260}
      styles={{ body: { pointerEvents: 'none' } }}
      target={
        <Badge onMouseEnter={() => setOpened(true)} onMouseLeave={() => setOpened(false)}>
          Hover badge to see popover
        </Badge>
      }
    >
      <div style={{ display: 'flex' }}>
        <Image
          src="./logo.svg"
          width={30}
          height={30}
          sx={{ minWidth: 30 }}
          mr="md"
        />
        <Text size="sm">Thanks for stopping by and checking Mantine, you are awesome!</Text>
      </div>
    </Popover>
  );
}

Position and placement

Popover position relative to target element is defined by:

  • position – popover side – top, bottom, right or left, defaults to top
  • placement – popover placement relative to position – start, center or end, defaults to center
  • gutter – space between popover and target element in px, defaults to 10px
<Popover position="bottom" placement="end" gutter={10} />

All positions and placement:

top-start
top-center
top-end
right-start
right-center
right-end
bottom-start
bottom-center
bottom-end
left-start
left-center
left-end

Control behavior

By default, popover:

  • has focus trap
  • closes when escape key is pressed
  • closes when outside click is registered

Usually it is a good idea to turn these settings off, if you show popover on focus or hover:

<Popover
  trapFocus={false} // -> disable focus trap
  closeOnEscape={false} // -> disable escape key press handling
  closeOnClickOutside={false} // -> disable outside click handling
/>

Close button and title

Popover includes optional close button and title:

  • set withCloseButton prop to show close button, add closeButtonLabel to set aria-label attribute on close button
  • set title prop to add title at the top of popover
<Popover title="Popover title" withCloseButton closeButtonLabel="Close popover" />

Control appearance

To change popover appearance use:

  • radius – applies border-radius from theme.radius
  • spacing – adds padding to all sides of popover from theme.spacing
  • shadow – add box-shadow from theme.shadows
Badge with popover
Radius
xs
sm
md
lg
xl
Spacing
xs
sm
md
lg
xl
Shadow
xs
sm
md
lg
xl
import { Popover, Image, Badge, Text } from '@mantine/core';


function Demo() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'flex-end', height: 200 }}>
      <Popover
        opened
        position="top"
        placement="center"
        withArrow
        trapFocus={false}
        closeOnEscape={false}
        width={260}
        styles={{ body: { pointerEvents: 'none' } }}
        transition="slide-up"
        target={<Badge>Badge with popover</Badge>}
       
      >
        <div style={{ display: 'flex' }}>
          <Image
            src="https://raw.githubusercontent.com/mantinedev/mantine/e630956424828b4103372d781cc64f0a54eebb33/docs/src/images/favicon.svg"
            width={30}
            height={30}
            sx={{ minWidth: 30 }}
            mr="md"
          />
          <Text size="sm">Thanks for stopping by and checking Mantine, you are awesome!</Text>
        </div>
      </Popover>
    </div>
  );
}

Initial focus

Popover uses use-focus-trap to manage focus. To specify initial focus element add data-autofocus attribute:

<Popover>
  <input />
  {/* Second input in modal will have initial focus */}
  <input data-autofocus />
  <input />
</Popover>

Usage with other overlays

Popover listens for outside clicks with use-click-outside hook. This means that it is not possible to use elements that render overlays within Portal inside Popover. To use components like Autocomplete, Menu, DatePicker portal feature should be disabled for these components:

<Popover>
  <Menu withinPortal={false} />
  <Autocomplete withinPortal={false} />
  <DatePicker withinPortal={false} />
</Popover>
Go back
Overlay – @mantine/core
Up next
Tooltip – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter