A lightweight floating hint component for short contextual help.

<rtgl-button id="help-btn">Show Tooltip</rtgl-button>
<rtgl-tooltip id="tooltip" content="Helpful context" place="t"></rtgl-tooltip>

<script>
  const button = document.getElementById("help-btn");
  const tooltip = document.getElementById("tooltip");

  button.addEventListener("click", () => {
    const rect = button.getBoundingClientRect();
    if (tooltip.hasAttribute("open")) {
      tooltip.removeAttribute("open");
      return;
    }
    tooltip.setAttribute("x", String(rect.left + rect.width / 2));
    tooltip.setAttribute("y", String(rect.top - 2));
    tooltip.setAttribute("open", "");
  });
</script>

• Controlled by open.
• Uses explicit x/y positioning.
• place controls orientation relative to anchor point.
• s controls tooltip padding, text scale, and max width presets.
• Opens in the browser top layer, so it paints above open dialogs and popovers wherever it sits in the DOM, and is not clipped by transformed or overflow: hidden ancestors. The page beneath stays interactive.
• Browsers without the Popover API (before Safari 17, Chrome 114, Firefox 125) open it as a non-modal dialog instead; there, place the tooltip inside an open dialog or popover so it renders above it.