discourse/app/assets/javascripts/float-kit/addon/components/d-tooltip.gjs

import Component from "@glimmer/component";
import { concat } from "@ember/helper";
import { getOwner } from "@ember/owner";
import { service } from "@ember/service";
import { modifier } from "ember-modifier";
import { and } from "truth-helpers";
import concatClass from "discourse/helpers/concat-class";
import icon from "discourse-common/helpers/d-icon";
import DFloatBody from "float-kit/components/d-float-body";
import { TOOLTIP } from "float-kit/lib/constants";
import DTooltipInstance from "float-kit/lib/d-tooltip-instance";

export default class DTooltip extends Component {
  @service tooltip;
  @service internalTooltip;

  tooltipInstance = new DTooltipInstance(getOwner(this), {
    ...this.allowedProperties,
    autoUpdate: true,
    listeners: true,
  });

  registerTrigger = modifier((element) => {
    this.tooltipInstance.trigger = element;
    this.options.onRegisterApi?.(this.tooltipInstance);

    return () => {
      this.tooltipInstance.destroy();
    };
  });

  get options() {
    return this.tooltipInstance?.options;
  }

  get componentArgs() {
    return {
      close: this.tooltip.close,
      data: this.options.data,
    };
  }

  get allowedProperties() {
    const properties = {};
    for (const [key, value] of Object.entries(TOOLTIP.options)) {
      properties[key] = this.args[key] ?? value;
    }
    return properties;
  }

  <template>
    <span
      {{this.registerTrigger this.allowedProperties}}
      class={{concatClass
        "fk-d-tooltip__trigger"
        (if this.tooltipInstance.expanded "-expanded")
      }}
      role="button"
      id={{this.tooltipInstance.id}}
      data-identifier={{this.options.identifier}}
      data-trigger
      aria-expanded={{if this.tooltipInstance.expanded "true" "false"}}
      ...attributes
    >
      <span class="fk-d-tooltip__trigger-container">
        {{#if (has-block "trigger")}}
          {{yield this.componentArgs to="trigger"}}
        {{else}}
          {{#if @icon}}
            <span class="fk-d-tooltip__icon">
              {{~icon @icon~}}
            </span>
          {{/if}}
          {{#if @label}}
            <span class="fk-d-tooltip__label">{{@label}}</span>
          {{/if}}
        {{/if}}
      </span>
    </span>

    {{#if this.tooltipInstance.expanded}}
      <DFloatBody
        @instance={{this.tooltipInstance}}
        @trapTab={{and this.options.interactive this.options.trapTab}}
        @mainClass={{concatClass
          "fk-d-tooltip__content"
          (concat this.options.identifier "-content")
        }}
        @innerClass="fk-d-tooltip__inner-content"
        @role="tooltip"
        @inline={{this.options.inline}}
      >
        {{#if (has-block)}}
          {{yield this.componentArgs}}
        {{else if (has-block "content")}}
          {{yield this.componentArgs to="content"}}
        {{else if this.options.component}}
          <this.options.component
            @data={{this.options.data}}
            @close={{this.tooltipInstance.close}}
          />
        {{else if this.options.content}}
          {{this.options.content}}
        {{/if}}
      </DFloatBody>
    {{/if}}
  </template>
}