components_info_widget.js

import { showTooltip } from './tooltip.js';

/**
 * InfoWidget — inline ⓘ icon that shows a hover tooltip and opens a docs page on click.
 *
 * Usage (HTML):
 *   <info-widget message="Explain something here" href="/docs/some-page"></info-widget>
 *
 * Usage (JS):
 *   const w = document.createElement('info-widget');
 *   w.setAttribute('message', 'Some explanation');
 *   w.setAttribute('href', '/docs/some-page');
 *   someElement.appendChild(w);
 *
 * Attributes:
 *   message  — text shown in the hover tooltip
 *   href     — URL opened in a new tab when the icon is clicked (optional)
 */
export class InfoWidget extends HTMLElement {
    #btn = null;
    #tip = null;

    /** @inheritdoc */
    connectedCallback() {
        if (this.#btn) return;
        this.#btn = document.createElement('button');
        this.#btn.className = 'info-widget-btn';
        this.#btn.innerHTML = '<span class="icon icon-info" style="width:13px;height:13px;"></span>';

        this.#btn.addEventListener('mouseenter', () => {
            const message = this.getAttribute('message') || '';
            const href = this.getAttribute('href');
            this.#tip = showTooltip(this.#btn, message, {
                html: true,
                extraClass: href ? 'info-widget-tooltip--has-link' : null,
            });
        });
        this.#btn.addEventListener('mouseleave', () => {
            this.#tip?.remove();
            this.#tip = null;
        });
        this.#btn.addEventListener('click', () => {
            const href = this.getAttribute('href');
            if (href) window.open(href, '_blank');
        });

        this.appendChild(this.#btn);
    }

    /** @inheritdoc */
    disconnectedCallback() {
        this.#tip?.remove();
        this.#tip = null;
    }
}

customElements.define('info-widget', InfoWidget);