[docs] Move Tooltip docs to static documentation

This moves the documentation to
https://chromedevtools.github.io/devtools-frontend/

Screenshot: https://b.corp.google.com/issues/414332459#comment14
Bug: 414332459
Change-Id: Ic895c65fdaac8859c949e6fb014dde11738ba80c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7099142
Reviewed-by: Philip Pfaffe <[email protected]>
Auto-Submit: Kim-Anh Tran <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/BUILD.gn

@@ -303,6 +303,7 @@ group("docs") {
     "ui/components/buttons:docs",
     "ui/components/icon_button:docs",
     "ui/components/spinners:docs",
+    "ui/components/tooltips:docs",
     "ui/legacy:copy_stylesheets_for_server",
   ]
 }

front_end/ui/components/docs/BUILD.gn

@@ -48,7 +48,6 @@ group("docs") {
     "./switch",
     "./text_prompt",
     "./theme_colors",
-    "./tooltip",
     "./tree_outline",
     "./user_agent_client_hints",
   ]

front_end/ui/components/docs/tooltip/BUILD.gn

@@ -2,6 +2,7 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+import("../../../../scripts/build/ninja/component_doc.gni")
 import("../../../../scripts/build/ninja/devtools_entrypoint.gni")
 import("../../../../scripts/build/ninja/devtools_module.gni")
 import("../../../../scripts/build/ninja/generate_css.gni")
@@ -43,3 +44,8 @@ devtools_ui_module("unittests") {
     "../../../testing",
   ]
 }
+
+component_doc("docs") {
+  sources = [ "Tooltip.docs.ts" ]
+  deps = [ ":bundle" ]
+}

front_end/ui/components/docs/tooltip/basic.html

@@ -0,0 +1,76 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Lit from '../../lit/lit.js';
+
+import {Tooltip} from './Tooltip.js';
+
+const {html} = Lit;
+
+export async function render(container: HTMLElement) {
+  Lit.render(
+      html`
+    <div style="position: relative; z-index: 0;">
+      <button aria-describedby="simple-tooltip" style="position: absolute; left: 16px; top: 16px;">
+        Simple
+      </button>
+      <devtools-tooltip id="simple-tooltip">Simple content</devtools-tooltip>
+    </div>
+    <div style="position: relative; z-index: 0;">
+      <span
+        aria-details="rich-tooltip"
+        style="position: absolute; left: 16px; top: 116px; border: 1px solid black;"
+      >
+        Non-button click trigger
+      </span>
+      <devtools-tooltip id="rich-tooltip" variant="rich" use-click>
+        <p>Rich tooltip</p>
+        <button>Action</button>
+      </devtools-tooltip>
+    </div>
+    <div style="position: relative; z-index: 0;">
+      <button
+        id="removable"
+        @click=${() => document.getElementById('removable')?.remove()}
+        class="anchor"
+        aria-details="programatic"
+        style="position: absolute; left: 16px; top: 216px;"
+      >
+        Click to remove anchor
+      </button>
+    </div>
+  `,
+      container);
+
+  const anchor = container.querySelector('.anchor') as HTMLElement;
+  const programmaticTooltip = new Tooltip({id: 'programatic', variant: 'rich', anchor});
+  programmaticTooltip.append('Text content');
+  anchor.insertAdjacentElement('afterend', programmaticTooltip);
+
+  // Make the buttons draggable, so that we can experiment with the position of the tooltip.
+  container.querySelectorAll('button,span').forEach(anchor => draggable(anchor as HTMLElement));
+  function draggable(element: HTMLElement|null): void {
+    if (!element) {
+      return;
+    }
+    element.addEventListener('mousedown', event => {
+      const target = event.target as HTMLElement;
+      const offsetX = event.clientX - target.getBoundingClientRect().left + container.getBoundingClientRect().left;
+      const offsetY = event.clientY - target.getBoundingClientRect().top + container.getBoundingClientRect().top;
+
+      function onMouseMove(event: MouseEvent) {
+        target.style.left = `${event.clientX - offsetX}px`;
+        target.style.top = `${event.clientY - offsetY}px`;
+      }
+
+      function onMouseUp() {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+      }
+
+      document.addEventListener('mousemove', onMouseMove);
+      document.addEventListener('mouseup', onMouseUp);
+    });
+  }
+}