Popover

Stable

A rich floating element displayed on user interaction (click, hover, manual)

<script setup lang="ts">
import { HButton, HIcon, HPopover } from '@holistics/design-system'
</script>

<template>
  <HPopover>
    <div class="flex items-center">
      <HIcon name="canvas" />
      <span class="ml-1">Canvas Dashboard</span>
    </div>

    <template #content>
      <div>
        <div class="text-title-xs text-gray-900">
          Owner
        </div>
        <div class="text-gray-700">
          [email protected]
        </div>
      </div>

      <div class="mt-2">
        <div class="text-title-xs text-gray-900">
          Description
        </div>
        <div class="text-gray-700">
          Te affert vivendo pro. Quas constituto id his, intellegam consectetuer vituperatoribus no eam.

          Ne his dictas epicuri eloquentiam, sea lorem petentium te. Usu nulla partem explicari et, labore assueverit per ei.
        </div>
      </div>

      <div class="mt-2 flex justify-end">
        <HButton
          type="secondary-default"
          size="sm"
          icon="edit"
        >
          Edit
        </HButton>
      </div>
    </template>
  </HPopover>
</template>

API

Pass-through: <HPopper>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
disabled	boolean	When true, disable Popper functinalities entirely.
anchor	PopperAnchorRect | PopperAnchorElement	Anchor element. Can be an object with coordinates or a virtual element. {@link https://floating-ui.com/docs/virtual-elements}
safeAreaDuration	number	Duration (ms) of the safe area to exist before closing.
disableOutsidePointerEvents	boolean	When true, only the top layer with disableOutsidePointerEvents = true has pointer-events: auto, all lower layers will have pointer-events: none To interact with any element within lower layers, user will need to click outside of all layers with disableOutsidePointerEvents = true until reaching the desired element. This can be used as a way to force all lower layers to not emit @pointer-down-outside while this layer is rendered.
strategy	Strategy	The type of CSS position property to use. This could affect the positioning computation of the Floating element. {@link https://floating-ui.com/docs/computeposition#strategy}
disableTransform	boolean	By default, the Floating element is positioned using transform. This is the most performant way to position elements. However, transform will create a new stacking context which could be problematic in some cases. For example, if there is a position: fixed element inside the Floating element that expects to be calculated against the viewport, transform positioning will place that element incorrectly, hence need to be disabled. {@link https://floating-ui.com/docs/vue#disabling-transform}
placement	Placement	The placement of the Floating element relative to the Anchor element. {@link https://floating-ui.com/docs/computeposition#placement}
distance	number = 2	The distance between the Floating element and the Anchor element (applied on the axis that runs along the side of the Floating element). {@link https://floating-ui.com/docs/offset#mainaxis}
skidding	number	The skidding between the Floating element and the Anchor element (applied on the axis that runs along the alignment of the Floating element). {@link https://floating-ui.com/docs/offset#crossaxis}
allowCollisions	boolean	Whether to allow the Floating element to collide with the boundary.
collisionBoundary	Boundary	The clipping element(s) or area that collision will be checked relative to. {@link https://floating-ui.com/docs/detectOverflow#boundary}
collisionPadding	Padding	The virtual padding around the boundary to check for collision. {@link https://floating-ui.com/docs/detectOverflow#padding}
noShift	boolean	When true, the Floating element won't be shifted if collisions occur. {@link https://floating-ui.com/docs/shift}
noFlip	boolean	When true, the placement of the Floating element won't change if collisions occur. {@link https://floating-ui.com/docs/flip}
prioritizePlacement	boolean	Whether to prioritize shifting (i.e. keeping original placement) over flipping when collisions occur. {@link https://floating-ui.com/docs/flip#combining-with-shift}
arrow	boolean = true	Whether to render arrow elements. The arrow has 2 parts: outer and inner. The inner will always overlap the outer to be able to create a continuous border connecting the arrow with the Floating element.
arrowPadding	Padding	The padding between the arrow and the edges of the Floating element. {@link https://floating-ui.com/docs/arrow#padding}
autoAvailableSize	boolean	Whether to automatically set maxWidth and maxHeight of the Floating element to the available corresponding sizes.
matchAnchorSize	boolean | "min" | "max"	Config to match the Anchor "size". The "size" here is detected by the final side of the Floating element: If the side is vertical (i.e. top, bottom), Anchor "size" is width If the side is vertical (i.e. left, right), Anchor "size" is height
transformOrigin	boolean	Whether to add CSS transform-origin property equals to the exact position where the Floating element appears.
hideWhenDetached	boolean	Whether to hide the Floating element when the Anchor element becomes fully occluded.
updatePositionStrategy	"optimized" | "always" | "none"	Strategy to update the position of the Floating element when necessary (optimized) or on every frame (always) or never update at all (none). {@link https://floating-ui.com/docs/autoupdate}
trapFocus	boolean	Whether to trap focus so it cannot escape the Floating element via keyboard, pointer, or a programmatic focus.
autoFocus	boolean	Whether to automatically focus first focusable element inside the Floating element on mount.
autoFocusElement	string | true | FocusableElement | null	Custom element used to automatically focus on mount or when calling the exposed autoFocus() function. Can be: true: to auto-focus the container string: query selector to search for an element within the container HTMLElement | SVGElement
floatingProps	HTMLAttributes	Additional props bound to the Floating element.
contentClass	HTMLAttributeClass	HTML class applied to the Content element.
contentStyle	StyleValue	HTML style applied to the Content element.
contentProps	HTMLAttributes	Additional props bound to the Content element.
open	boolean	The opening state of the Floating element.
delay	number | null	The delay duration (in milliseconds) from when hovering the Anchor element until the Popper gets opened. NOTE: If delay == 0, Popper will be opened instantly with no frame waited. If you want the behavior of setTimeout(() => { ...}, 0), set this prop to 1. If delay == null, Popper will try getting the delay of the PopperHoverProvider context. If no context is provided, it will be 0.
disableHoverableContent	boolean	When true, trying to hover the Floating element will close it.
forceHoverProviderSafeAreas	boolean	By default, PopperSafeAreas provided by the parent (if exists) will override any Hover Provider. Setting this to true will force Hover Provider to override the parent instead.
floatingTeleportTo	string | RendererElement | null	Specify target container. Can either be a selector or an actual element. {@link https://vuejs.org/api/built-in-components.html#teleport}
floatingTeleportDisabled	boolean	When true, the content will remain in its original location instead of moved into the target container. Can be changed dynamically. {@link https://vuejs.org/api/built-in-components.html#teleport}
floatingTeleportDefer	boolean	When true, the Teleport will defer until other parts of the application have been mounted before resolving its target. (3.5+) {@link https://vuejs.org/api/built-in-components.html#teleport}
floatingClass	HTMLAttributeClass	HTML class applied to the Floating element.
floatingStyle	StyleValue	HTML style applied to the Floating element.
contentAsChild	boolean	asChild prop but applied for the Content element (i.e. the direct element inside the inner Floating element). asChild prop: Change the default rendered element for the one passed as a child, merging their props and behavior. If there are multiple elements/components passed, only the first valid one will have the props.
trigger	PopperTrigger = "click"	The type of event to automatically control opening state of the Floating element.
floatingPadding	"default" | "thick" = "default"	Padding preference of the Floating element: default = 0.5rem thick = 1rem

Events

Name	Parameters	Description
@update:open	[opened: boolean]
@postOpen	[event: CustomEvent<any>]
@postClose	[event: CustomEvent<any>]
@pointerDownOutside	[event: PointerDownOutsideEvent]
@focusOutside	[event: FocusOutsideEvent]
@interactOutside	[event: PointerDownOutsideEvent | FocusOutsideEvent]
@keydownEscape	[event: KeyboardEvent]
@autoFocusOnMount	[event: CustomEvent<any>]
@autoFocusOnUnmount	[event: CustomEvent<any>]

Slots

Name	Scoped	Description
#default	{ open: boolean; onOpen: () => void; onClose: (force?: boolean | undefined, propagated?: boolean | undefined) => void; updatePosition: EventHookTrigger<void>; }
#content	{ onClose: (force?: boolean | undefined, propagated?: boolean | undefined) => void; updatePosition: EventHookTrigger<void>; }

Exposed

Name	Type	Description
popperRef	({ $: ComponentInternalInstance; $data: {}; $props: { readonly open?: boolean | undefined; readonly trigger: PopperTrigger; readonly delay?: number | null | undefined; ... 45 more ...; readonly onAutoFocusOnUnmount?: ((event: CustomEvent<...>) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCu...