• /
  • Log in
  • Start now

Popover

<Popover> are toggleable overlays for displaying small overlays on demand.

The <Popover> component requires you to provide a trigger with <PopoverTrigger> that will handle the opening/closing of the overlay, as well as the content for the overlay trough <PopoverBody />

Usage

import { Popover } from 'nr1'

Examples

Basic

1
<Popover>
2
<PopoverTrigger>Trigger</PopoverTrigger>
3
<PopoverBody>
4
<BlockText>Body</BlockText>
5
</PopoverBody>
6
</Popover>;

Button as trigger

1
<Popover>
2
<PopoverTrigger>
3
<Button>Trigger</Button>
4
</PopoverTrigger>
5
<PopoverBody>
6
<BlockText>Body</BlockText>
7
</PopoverBody>
8
</Popover>;

TextField as trigger

1
<Popover>
2
<PopoverTrigger>
3
<TextField />
4
</PopoverTrigger>
5
<PopoverBody>
6
<BlockText>Body</BlockText>
7
</PopoverBody>
8
</Popover>;

Props

childrenrequirednode[]

This component accepts children of two types:

  • <PopoverTrigger> to render the element that will open/close the overlay.
  • <PopoverBody> to render content inside the overlay.

Methods

Popover.render

function () => undefined
Edit this pageCreate an issue
Copyright © 2021 New Relic Inc.

This site uses cookies 🍪

We use cookies and other similar technologies ("Cookies") on our websites and services to enhance your experience and to provide you with relevant content. By using our websites and services you are agreeing to the use of cookies. You can read more here. If you consent to our cookies, please click Yes.