Popover — Core

Popover / Bubble

Attribute-driven popover bubbles. Drop data-vd-bubble="…" on any element and the framework builds, positions, and wires the panel for you — with auto-placement flip on viewport overflow, outside-click and Escape dismissal. data-vd-popover is a drop-in alias.

Basic Popover

<!-- Basic popover via data attribute -->
<button class="vd-btn vd-btn-primary"
        data-vd-bubble="This is a simple popover message.">
  Show Popover
</button>

<!-- Alias: data-vd-popover also works -->
<button class="vd-btn vd-btn-outline"
        data-vd-popover="Same behaviour.">
  Alias
</button>

Placement Variants

<button data-vd-bubble="Top"
        data-vd-bubble-placement="top">Top</button>

<button data-vd-bubble="Right"
        data-vd-bubble-placement="right">Right</button>

<button data-vd-bubble="Bottom"
        data-vd-bubble-placement="bottom">Bottom</button>

<button data-vd-bubble="Left"
        data-vd-bubble-placement="left">Left</button>

With Title & Close Button

<button class="vd-btn vd-btn-primary"
        data-vd-bubble="Body text for the popover."
        data-vd-bubble-title="Popover Title"
        data-vd-bubble-placement="bottom">
  Titled Popover
</button>

Body-only (No Title)

No Title Any Element

<!-- Works on any element, not just buttons -->
<span class="vd-btn vd-btn-outline-secondary"
      data-vd-bubble="A compact bubble with no header — just content."
      data-vd-bubble-placement="top">
  No Title
</span>

Engine wiring

import { ref } from 'vue';
import { usePopover } from "@vanduo-oss/vd3";

const root = ref<HTMLElement | null>(null);
usePopover(root);   // wires every [data-vd-bubble] inside root; cleanup on unmount

API Reference

CSS Classes

Class	Description
`.vd-bubble-content`	Generated popover container.
`.vd-popover-content`	Alias for .vd-bubble-content.
`.vd-bubble-header`	Header bar (present only with a title).
`.vd-bubble-title`	Title text inside the header.
`.vd-bubble-close`	Close button rendered in the header.
`.vd-bubble-body`	Body content area.

Data Attributes

Attribute	Description
`data-vd-bubble`	Popover text. Required. (alias: data-vd-popover)
`data-vd-bubble-placement`	top \| right \| bottom \| left. Default: bottom. (alias: data-vd-popover-placement)
`data-vd-bubble-title`	Adds a header with the given title + a close button.
`data-vd-bubble-html`	Render trusted HTML content (sanitised).

JavaScript Methods

Method	Description
`usePopover(root)`	Wire every [data-vd-bubble] / popover trigger inside root; returns a controller. Call once in setup().
`controller.show(trigger)`	Open the bubble/panel for a wired trigger element.
`controller.hide(trigger)`	Close the bubble/panel for a wired trigger element.
`controller.hideAll()`	Close every bubble and panel wired by this instance.
`controller.refresh()`	Re-scan the root and wire triggers added since mount.

Events

Event	Description
`bubble:show`	Fired on the trigger when its popover opens.
`bubble:hide`	Fired on the trigger when its popover closes.

Accessibility

Trigger carries aria-haspopup="dialog" + toggled aria-expanded + aria-controls pointing at the generated panel.
Escape closes the most recently opened popover.
Click triggers close on outside click; resize / scroll recomputes placement and flips on overflow.
Content is sanitised; inline styles are stripped (v1.4.1+).