@hz-libs/bpe-ui-popover

Popover, dropdown, and anchored tooltip primitives for Vue 3.

Docs

Install

pnpm add @hz-libs/bpe-ui-popover

The app must already depend on Vue ^3.5.0. Component CSS is included in the JavaScript import.

Menu

The default slot receives a popovertarget id. Put that id on the button that opens the menu. Set trigger="hover" when the menu should open without a click.

<script setup>
import { Dropdown } from '@hz-libs/bpe-ui-popover'
</script>

<template>
  <Dropdown>
    <template #default="{ popovertarget }">
      <button type="button" :popovertarget="popovertarget">Open menu</button>
    </template>
    <template #content>
      <button type="button">Edit</button>
      <button type="button">Duplicate</button>
    </template>
  </Dropdown>
</template>

Tooltip

The bubble is a popover, so it draws above the page. Pass the slot props to the trigger. The default placement is top-center. disabled leaves the trigger in place and shows nothing on hover.

<script setup>
import { Tooltip } from '@hz-libs/bpe-ui-popover'
</script>

<template>
  <Tooltip content="Hover tooltip" placement="left-center">
    <template #default="targetProps">
      <button type="button" v-bind="targetProps">Hover me</button>
    </template>
  </Tooltip>
</template>

Exports

ControlledTooltip, Dropdown, Tooltip, usePopover, Placement, PlacementArea, calculatePlacement, createPositionChangedObserver, getArrowStyle, getPopoverContentStyle, getPopoverStyle.