Popover

When the mouse clicks/moves in, the pop-up pop-up box is used to display more content.

Import

import { Popover, Whisper } from 'rsuite';

<Popover> Pop-up box.
<Whisper> Monitor triggers, wrap the outside of the listener object, and notify the Tooltip when the event is triggered.

Basic

Default

Rendering...

Placement

Rendering...

Triggering events

Whisper provides a trigger props, which is used to control the display of Popover in different business scenarios. Props values include:

click: It will be triggered when the element is clicked, and closed when clicked again.
contextMenu: It will be triggered when you trigger contextMenu on the element.
focus: It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's tab key.
hover: Will be triggered when the cursor (mouse pointer) is hovering over the element.
active: It is triggered when the element is activated.
none: No trigger event, generally used when it needs to be triggered by a method.

Rendering...

Note: Safari ignoring tabindex

Container and prevent overflow

Positioned popover components in scrolling container

Rendering...

Hide arrow indicator

You can hide arrow indicator by setting arrow props to false;

Rendering...

Follow cursor

You can enable the Popover to follow the cursor by setting followCursor={true}.

Rendering...

Props

Property	Type `(Default)`	Description
arrow	boolean `(true)`	Whether show the arrow indicator
children *	ReactNode	The content of the component.
classPrefix	string `('popover')`	The prefix of the component CSS class.
title	ReactNode	The title of the component.
visible	boolean	The component is visible by default.

`<Whisper>`

Property	Type `(Default)`	Description
container	HTMLElement \| (() => HTMLElement)	Sets the rendering container
controlId	string	Set the `id` on `<Overlay>` and `aria-describedby` on `<Whisper>`
defaultOpen	boolean	Whether to open the overlay by default
delay	number	Delay time (ms) Time
delayClose	number	Delay close time (ms) Time
delayOpen	number	Delay open time (ms) Time
enterable	boolean	Whether mouse is allowed to enter the floating layer of popover,when the value of `trigger` is set to`hover`
followCursor	boolean	Whether enable `speaker` to follow the cursor
full	boolean	The content full the container
onBlur	() => void	Lose Focus callback function
onClick	() => void	Click on the callback function
onClose	() => void	Callback fired when close component
onEnter	() => void	Callback fired before the overlay transitions in
onEntered	() => void	Callback fired after the overlay finishes transitioning in
onEntering	() => void	Callback fired as the overlay begins to transition in
onExit	() => void	Callback fired right before the overlay transitions out
onExited	() => void	Callback fired after the overlay finishes transitioning out
onExiting	() => void	Callback fired as the overlay begins to transition out
onFocus	() => void	Callback function to get focus
onOpen	() => void	Callback fired when open component
open	boolean	Whether to open the overlay
placement	Placement `('right')`	Dispaly placement
preventOverflow	boolean	Prevent floating element overflow
speaker *	Tooltip \| Popover \| ReactElement	Displayed component
trigger	Trigger `(['hover','focus'])`	Triggering events

Whisper methods

Whisper methods are available via ref on Whisper component.

const whisperRef = useRef();

<Whisper ref={whisperRef} {...}>
  ...
</Whisper>

Available methods include

open

Open a overlay.

open: (delay?: number) => void

Close a overlay.

close: (delay?: number) => void

updatePosition

Update overlay position

updatePosition: () => void

`ts:Trigger`

type Trigger =
  | Array<'click' | 'contextMenu' | 'hover' | 'focus' | 'active'>
  | 'click'
  | 'contextMenu'
  | 'hover'
  | 'focus'
  | 'active'
  | 'none';

`ts:Placement`

type Placement =
  | 'top'
  | 'bottom'
  | 'right'
  | 'left'
  | 'bottomStart'
  | 'bottomEnd'
  | 'topStart'
  | 'topEnd'
  | 'leftStart'
  | 'leftEnd'
  | 'rightStart'
  | 'rightEnd'
  | 'auto'
  | 'autoVerticalStart'
  | 'autoVerticalEnd'
  | 'autoHorizontalStart'
  | 'autoHorizontalEnd';