Skip to content
v1.0
Components

Popover & tooltip

Two things anchored to what they describe — a popover that explains its subject, and a tooltip that only names the control under it.

Popover

Escape and a click anywhere else dismiss it, and focus returns where it was.
Code 
<GdPopover v-model="open" placement="bottom">
  <template #trigger="{ toggle }">
    <GdButton size="sm" @click="toggle">What is a setback?</GdButton>
  </template>
  A setback is the minimum distance between a structure and a boundary.
</GdPopover>

Tooltip

Creek flooding
300ms in, instant out, Escape dismisses — and it shows on FOCUS, which is the half hover-only tooltips forget.
Code 
<GdTooltip text="Save this parcel">
  <GdButton icon label="Save this parcel">…</GdButton>
</GdTooltip>

<GdTooltip text="Mapped constraint" placement="bottom">
  <GdChip swatch="#5B93C9">Creek flooding</GdChip>
</GdTooltip>

API

GdPopover

Props

PropTypeDefault
modelValuebooleanfalse

Open or closed, as `v-model`. The component sets it back to `false` on Escape and on a click outside; the caller owns it the rest of the time.

placement"top" | "bottom" | "left" | "right""bottom"

Which side of the anchor the panel sits on. Static — there is no collision flipping, so pick the side that has room.

Slots

trigger

The caller's own element, given `{ open, toggle }`. Wire `toggle` to whatever opens it.

default

The panel's content. Prose and links — a list of commands is a menu.

Events

update:modelValueboolean

Emitted on Escape, on a click outside, and from the slot's `toggle`.

GdTooltip

Props

PropTypeDefault
textrequiredstring—

The label. Plain text only — a tooltip names or qualifies, it never carries markup or an action.

placement"top" | "bottom" | "left" | "right""top"

Which side of the trigger the panel sits on. Note the default differs from the popover's: a tooltip goes above, a popover below.

delaynumber300

Milliseconds before it appears. The delay is on the way in only — leaving is instant.

Slots

default

The trigger. The tooltip wraps it in an inline-flex span and listens on that.

Usage Guidelines

  • Use a popover to explain the thing it is anchored to, while the page stays live behind it — the map app's default overlay.
  • Use a tooltip to name or qualify the control under it, and nothing more.
  • Use a dialog instead when the content demands a decision.
  • Use a menu instead when the content is a list of commands. A popover with buttons in it is a menu missing its keyboard contract.
  • Put nothing in either that the user must read to proceed. If it matters, it belongs in the page.
  • Pair a tooltip with aria-label whenever the tooltip is the only name the control has.
  • Pick a placement that has room. Neither component flips away from a viewport edge.

Behavior & Anatomy

Non-modal on purpose

Non-modal on purpose: the page stays live, Escape and clicking anywhere else dismiss, and focus returns where it was. The trigger is the caller's element, received through the slot with { open, toggle } — a popover that renders its own button would dictate what may anchor one. A list of commands is a menu, not a popover with buttons in it.

A map app cannot afford to bury the map, which is why anything merely explanatory is anchored to the thing it explains rather than thrown into a dialog.

Why the tooltip shows on focus

Showing on hover alone leaves the keyboard out entirely, and a control whose only name is a hover label has no name at all for anyone tabbing through. The panel is pointer-events: none so it can never sit between the pointer and the control it belongs to, and it takes the inverse surface for the same reason a toast does — it is transient chrome, not part of the page.

Navigate

Esc