II · Components / 12
Overlays
Every part the site is built from, live, in both themes.
Overlays#
Tooltips explain, popovers hold a few controls, menus act, and dialogs ask only when there is no way back. All of them close with Escape and hand focus back where it was.
Use
Built on the platform: the popover attribute and <dialog>, placed with CSS anchor positioning. Nothing essential lives only in a tooltip.
Craft Lionheart Helm at 300 Blacksmithing, look up the Classic Era listing for Lightforge Breastplate in Blackrock Spire (unconfirmed in Forever), or start with Frost Tiger Blade.
At level 60 a Retribution Paladin wants hit ratingMakes your attacks and spells less likely to miss. At level 60 in Forever, 10 rating is 1%. first, until attacks stop missing. After that comes critical strike ratingHow often an attack or spell lands a critical hit for extra damage. At level 60 in Forever, 14 rating is 1%., then attack powerAdds to the damage of your weapon attacks..
Conversions from the Forever client’s rating table at level 60: 10 hit rating or 14 critical strike rating is 1%.
Use
Every item name in running text is a link: hover or focus shows the game’s tooltip, and Shift (or a tap) pins it so its terms can be explained. A word a new player may not know gets a dotted underline and plain words, the first time a page uses it.
Avoid
Explaining what the page already says, or hiding a step someone needs inside a tooltip.
Lionheart Helm
Item Level 61
HeadPlate
565 Armor
+18 Strength
Requires Level 56
Equip: Increases your hit rating by 20 (2.00% at level 60).
Equip: Increases your critical strike rating by 28 (2.00% at level 60).
Forever client recipe: Blacksmithing
Use
The game’s order, the Forever client’s numbers, and a line saying where it all came from. Night glass in both themes, as in game.
Implementation contract
Use it in the product
Reveal detail or actions without hiding the task or trapping focus in a nonmodal surface.
- Exports
- Tooltip, Popover, Menu, Dialog, CommandPalette, ItemLink, Term
- Source
src/components/waypoint/ui/interactive.tsx; src/components/waypoint/ui/game-live.tsx- Props and defaults
- Tooltip requires content and one trigger child. Popover requires trigger, children and label. Dialog requires open, onClose and title; variant defaults to dialog. ItemLink requires a sourced TooltipItem. CommandPalette requires open, onClose and entries; remote adds records fetched as the reader types (the header asks /api/suggest), with onQueryChange to follow the query.
- HTML and keyboard
- Tooltip explains. Popover and menu act. Dialog and modal sheets have a visible title, Escape close and focus return. Essential steps remain outside tooltips.
- States and themes
- Closed, opening, open, busy, error and closing. Reduced motion opens in place; a failed action keeps its input and offers retry. The palette says when it is searching and when the database is unavailable, keeps page matches working meanwhile, and on touch screens trades key hints for a 44px close button.
- Data and provenance
- Item details retain their source/build inside the overlay; a pinned tooltip never becomes the only location for an essential fact. The current gear catalog is build 1.60.1.70245.
Example usage
"use client";
import { useState } from "react";
import { Dialog } from "@/components/waypoint/ui/interactive";
export function ReviewChanges() {
const [open, setOpen] = useState(false);
return <><button type="button" onClick={() => setOpen(true)}>Review</button><Dialog open={open} onClose={() => setOpen(false)} title="Review changes">Check the affected slots before applying.</Dialog></>;
}