Popover API · Needless UI

Import

import-popover.ts

import {
  NuiHovercard,
  NuiHovercardTrigger,
  NuiPopover,
  NuiPopoverTrigger,
} from '@needless-ui/angular/popover';

A native popover placed next to the element that opened it.

NuiPopover: Properties
Name	Type	Default	Description
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	The side of the trigger it opens on. It flips when there is no room.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	How it lines up with the trigger along that side.
`offset`Input	`number`	`8`	Gap between the trigger and the panel, in pixels.
`arrow`Input	`boolean`	`false`	Shows an arrow that points at the trigger.
`enter`Input	`NuiEnter`		How it arrives: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` or `none`.
`motion`Input	`NuiMotion`		The spring it moves with: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` or `none`.
`spring`Input	`NuiSpring`		Any spring, as `{ stiffness, damping, mass }`, compiled to CSS at runtime. It overrides `motion`.
`corners`Input	`NuiCorners`		The shape of its corners: `round`, `squircle`, `bevel`, `scoop`, `notch` or `square`.
`radius`Input	`NuiRadius`		How big its corners are: `none`, `small`, `medium`, `large` or `full`.
`density`Input	`NuiDensity`		How much room it takes: `compact`, `regular` or `roomy`.
`openChange`Output	`boolean`		Emits when it opens or closes.
`show`Method	`(anchor: HTMLElement) => void`		Opens it next to any element.
`hide`Method	`() => void`		Closes it.

Customization inputs you leave unset follow the nearest data-nui-* attribute. See the customization guide.

A button that opens and closes a popover, with the native popovertarget.

NuiPopoverTrigger: Properties
Name	Type	Default	Description
`nuiPopoverTrigger`Input	`NuiPopover`		The popover to open.

A rich tooltip that describes its trigger.

NuiHovercard: Properties
Name	Type	Default	Description
`side`Input	`'top' \| 'bottom' \| 'start' \| 'end'`	`'bottom'`	The side of the trigger it opens on. It flips when there is no room.
`align`Input	`'start' \| 'center' \| 'end'`	`'start'`	How it lines up with the trigger along that side.
`offset`Input	`number`	`8`	Gap between the trigger and the card, in pixels.
`arrow`Input	`boolean`	`false`	Shows an arrow that points at the trigger.
`openDelay`Input	`number`	`500`	Milliseconds of hover before it opens. Keyboard focus opens it at once.
`closeDelay`Input	`number`	`300`	Milliseconds before it closes, once the pointer has left.
`enter`Input	`NuiEnter`		How it arrives: `zoom`, `fade`, `drop`, `rise`, `unfold`, `flip`, `swing`, `slide` or `none`.
`motion`Input	`NuiMotion`		The spring it moves with: `snappy`, `bouncy`, `jelly`, `elastic`, `lazy`, `mechanical` or `none`.
`spring`Input	`NuiSpring`		Any spring, as `{ stiffness, damping, mass }`, compiled to CSS at runtime. It overrides `motion`.
`corners`Input	`NuiCorners`		The shape of its corners: `round`, `squircle`, `bevel`, `scoop`, `notch` or `square`.
`radius`Input	`NuiRadius`		How big its corners are: `none`, `small`, `medium`, `large` or `full`.
`density`Input	`NuiDensity`		How much room it takes: `compact`, `regular` or `roomy`.
`openChange`Output	`boolean`		Emits when it opens or closes.
`show`Method	`(anchor: HTMLElement) => void`		Opens it next to any element.
`hide`Method	`() => void`		Closes it.

Customization inputs you leave unset follow the nearest data-nui-* attribute. See the customization guide.

Shows a hovercard on hover and on keyboard focus, and makes it this element’s description.

NuiHovercardTrigger: Properties
Name	Type	Default	Description
`nuiHovercardTrigger`Input	`NuiHovercard`		The hovercard to show.