Components / Components

Tooltip

Components tooltip

Hover/focus hint bubble above an element.

Markup

Drops in as data-pb-block="tooltip".

<div data-pb-block="tooltip" class="pb-tooltip" x-data="{ h: false }" style="display:inline-block;position:relative;">
  <button type="button" class="pb-tooltip__trigger" @mouseenter="h = true" @mouseleave="h = false" @focus="h = true" @blur="h = false" :aria-describedby="h ? 'pb-tooltip-bubble' : null" style="display:inline-block;padding:0.6rem 1.1rem;border:1px solid #cbd5e1;border-radius:0.5rem;background:#fff;color:#334155;font-weight:600;cursor:default;">Hover me</button>
  <span class="pb-tooltip__bubble" id="pb-tooltip-bubble" role="tooltip" x-show="h" x-cloak x-transition.opacity style="position:absolute;bottom:calc(100% + 0.5rem);left:50%;transform:translateX(-50%);white-space:nowrap;padding:0.4rem 0.65rem;border-radius:0.375rem;background:#0f172a;color:#fff;font-size:0.8125rem;line-height:1.3;box-shadow:0 4px 12px rgba(15,23,42,0.25);z-index:10;">Helpful hint goes here</span>
</div>

Settings

Interactive behaviour is built in; on top of that every block supports:

Bind to State

Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.

On event → run a Flow

Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.

Link to a page

Navigate to another published page on click with data-pb-page="<slug>".

Styles & classes

Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="tooltip" so it imports as a labelled, editable component.

Interactive out of the box

Ships with Alpine state baked in (x-data, @click, x-show, x-transition) — open/close, tabs and toggles work with no wiring. These owner-authored blocks are trusted and keep their executable directives.