xl vision
  • Component
  • React Hooks
  • Playground
  • Overview
  • useTransition
  • useCssTransition
  • usePopper
  • useNotication
  • useForm
  • useResizeObserver

usePopper

Easily create Hooks for tooltip, popover and other components

Examples

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Basic usage

Basic usage

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Offset

Control the spacing between the popper and the reference by setting offset.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Keep the popup in the visible area

By offsetting the popper position to a certain extent, it is guaranteed that it is always within the visible area. When the references all leave the viewport, the popper follows. That is to say, the popper is kept in the viewable area with priority.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae pellentesque elit, in dapibus enim. Aliquam hendrerit iaculis facilisis.
Automatically calculate location

When the visible space in the specified direction is insufficient, the direction with sufficient space will be automatically selected for display

Lorem ipsum dolor sit amet.
Hide

The popper is automatically hidden when the reference goes beyond the visible area.

Lorem ipsum dolor sit amet.
Virtual element

You can also target virtual elements, such as the right mouse button.

Lorem ipsum dolor sit amet.
Automatically update positioning

Use useAutoUpdatePopper to automatically monitor events such as scrolling or other strategies to ensure accurate positioning

Lorem ipsum dolor sit amet.
Arrow

Arrow

Interaction

Interaction

Properties

PropertyDescriptionTypeDefaultRequire
placementpopper positiontop | top-start | top-end | right | right-start | right-end | bottom | bottom-start | bottom-end | left | left-start | left-end-true
modepositioning modefixed | absolutefixedfalse
middlewaresmiddlewareArray<Middleware>-false
Examples
Basic usage
Offset
Keep the popup in the visible area
Automatically calculate location
Hide
Virtual element
Automatically update positioning
Arrow
Interaction
Properties
Copyright © 2020-2021 Rhys Xia