// 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 './tooltips.js'; const {html} = Lit; export function render(container: HTMLElement) { Lit.render( html`

Non-button click trigger

`, container); const anchor = container.querySelector('.anchor') as HTMLElement; const programmaticTooltip = new Tooltip.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); }); } }