Tooltip

1. Live Preview

vanilla live preview activates on the client; source HTML keeps a readable preview island and primitive contract.

2. Installation

Install adapter-specific dependencies first, then complete setup via the installation guide. installation docs

pnpm add @nake-ui/primitives @nake-ui/adapter-vanilla @nake-ui/theme-vanilla

3. Usage

Minimal runnable usage for the current adapter.

import "@nake-ui/theme-vanilla/styles.css";
import { bindTooltip } from "@nake-ui/adapter-vanilla";

const binding = bindTooltip(nodes, items, options);
binding.destroy();

4. Examples

Delay

Control tooltip open/close timing with custom delay scheduling.

import "@nake-ui/theme-vanilla/styles.css";
import { bindTooltip } from "@nake-ui/adapter-vanilla";

const OPEN_DELAY = 600;
const CLOSE_DELAY = 200;

if (typeof window !== "undefined" && typeof document !== "undefined") {
  let open = false;

  const tooltipOptions = {
    id: "vanilla-tooltip-delay-controller",
    placement: "top",
    offset: 10,
    open,
    openOnHover: false,
    openOnFocus: false,
    onOpenChange(nextOpen) {
      open = nextOpen;
      tooltipOptions.open = nextOpen;
    }
  };

  const binding = bindTooltip({ root, trigger, positioner, content, arrow }, tooltipOptions);

  let openTimer = null;
  let closeTimer = null;

  const setOpen = (nextOpen) => {
    if (open === nextOpen) return;
    open = nextOpen;
    tooltipOptions.open = nextOpen;
    binding.sync();
  };

  trigger.addEventListener("pointerenter", () => {
    if (closeTimer) clearTimeout(closeTimer);
    if (openTimer) clearTimeout(openTimer);
    openTimer = setTimeout(() => setOpen(true), OPEN_DELAY);
  });

  trigger.addEventListener("pointerleave", () => {
    if (openTimer) clearTimeout(openTimer);
    if (closeTimer) clearTimeout(closeTimer);
    closeTimer = setTimeout(() => setOpen(false), CLOSE_DELAY);
  });

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Delayed hint";

Controlled Open

Use controlled open state and toggle tooltip from an external button.

import "@nake-ui/theme-vanilla/styles.css";
import { bindTooltip } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  let open = false;

  const tooltipOptions = {
    id: "vanilla-tooltip-controlled-controller",
    placement: "top",
    offset: 10,
    open,
    onOpenChange(nextOpen) {
      open = nextOpen;
      tooltipOptions.open = nextOpen;
      state.textContent = nextOpen ? "open" : "closed";
    }
  };

  const binding = bindTooltip({ root, trigger, positioner, content, arrow }, tooltipOptions);

  toggle.addEventListener("click", () => {
    open = !open;
    tooltipOptions.open = open;
    binding.sync();
    state.textContent = open ? "open" : "closed";
  });

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Controlled tooltip";

Disabled Trigger

Keep trigger visible while preventing tooltip interactions in disabled mode.

import "@nake-ui/theme-vanilla/styles.css";
import { bindTooltip } from "@nake-ui/adapter-vanilla";

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const binding = bindTooltip(
    { root, trigger, positioner, content, arrow },
    {
      id: "vanilla-tooltip-disabled-controller",
      placement: "top",
      offset: 10,
      disabled: true
    }
  );

  // cleanup on unmount
  binding.destroy();
}

trigger.textContent = "Disabled action";
trigger.disabled = true;

Placement

Demonstrate tooltip placement matrix across top/right/bottom/left and start/center/end.

import "@nake-ui/theme-vanilla/styles.css";
import { bindTooltip } from "@nake-ui/adapter-vanilla";

const topPlacements = ["top-start", "top", "top-end"];
const rightPlacements = ["right-start", "right", "right-end"];
const bottomPlacements = ["bottom-start", "bottom", "bottom-end"];
const leftPlacements = ["left-start", "left", "left-end"];

if (typeof window !== "undefined" && typeof document !== "undefined") {
  const placements = [...topPlacements, ...rightPlacements, ...bottomPlacements, ...leftPlacements];

  for (const placement of placements) {
    const binding = bindTooltip(
      {
        root: roots[placement],
        trigger: triggers[placement],
        positioner: positioners[placement],
        content: contents[placement],
        arrow: arrows[placement]
      },
      { id: "vanilla-tooltip-placement-controller-${placement}", placement, offset: 10 }
    );

    // cleanup on unmount
    binding.destroy();
  }
}

const contentText = placement;

5. RTL

The same structure running inside a `dir="rtl"` container.