DEV: a new `d-tooltip` component (#17513)

app/assets/javascripts/discourse/app/components/d-tooltip.js

@@ -0,0 +1,35 @@
+import Component from "@ember/component";
+import { schedule } from "@ember/runloop";
+import tippy from "tippy.js";
+
+export default class DiscourseTooltip extends Component {
+  tagName = "";
+
+  didInsertElement() {
+    this._super(...arguments);
+    this._initTippy();
+  }
+
+  willDestroyElement() {
+    this._super(...arguments);
+    this._tippyInstance.destroy();
+  }
+
+  _initTippy() {
+    schedule("afterRender", () => {
+      // Ember.ViewUtils.getViewBounds is a private API,
+      // but it's not going to be dropped without a public deprecation warning,
+      // see: https://stackoverflow.com/a/50125938/3206146
+      // eslint-disable-next-line no-undef
+      const viewBounds = Ember.ViewUtils.getViewBounds(this);
+      const element = viewBounds.firstNode;
+      const parent = viewBounds.parentElement;
+      this._tippyInstance = tippy(parent, {
+        content: element,
+        theme: "d-tooltip",
+        arrow: false,
+        placement: "bottom-start",
+      });
+    });
+  }
+}

app/assets/javascripts/discourse/app/templates/components/d-tooltip.hbs

@@ -0,0 +1,3 @@
+<div>
+  {{yield}}
+</div>

app/assets/javascripts/discourse/tests/integration/components/d-tooltip-test.js

@@ -0,0 +1,47 @@
+import { module, test } from "qunit";
+import { render, triggerEvent } from "@ember/test-helpers";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { hbs } from "ember-cli-htmlbars";
+import { query } from "discourse/tests/helpers/qunit-helpers";
+
+async function mouseenter() {
+  await triggerEvent(query("button"), "mouseenter");
+}
+
+module("Integration | Component | d-tooltip", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("doesn't show tooltip if it wasn't expanded", async function (assert) {
+    await render(hbs`
+      <button>
+        <DTooltip>
+          Tooltip text
+        </DTooltip>
+      </button>
+     `);
+    assert.notOk(document.querySelector("[data-tippy-root]"));
+  });
+
+  test("it shows tooltip on mouseenter", async function (assert) {
+    await render(hbs`
+      <button>
+        <DTooltip>
+          Tooltip text
+        </DTooltip>
+      </button>
+     `);
+
+    await mouseenter();
+    assert.ok(
+      document.querySelector("[data-tippy-root]"),
+      "the tooltip is added to the page"
+    );
+    assert.equal(
+      document
+        .querySelector("[data-tippy-root] .tippy-content")
+        .textContent.trim(),
+      "Tooltip text",
+      "the tooltip content is correct"
+    );
+  });
+});

app/assets/stylesheets/common/components/_index.scss

@@ -6,6 +6,7 @@
 @import "color-input";
 @import "conditional-loading-section";
 @import "convert-to-public-topic-modal";
+@import "d-tooltip";
 @import "date-input";
 @import "date-picker";
 @import "date-time-input-range";

app/assets/stylesheets/common/components/d-tooltip.scss

@@ -0,0 +1,11 @@
+// ".tippy-box" is one of the classes tippy.js uses for creating tooltips
+// see https://atomiks.github.io/tippyjs/v6/themes/#tippy-elements
+//
+// Using `data-theme~="d-tooltip"` scopes down these styles
+// to tooltips created using the d-tooltip component
+.tippy-box[data-theme~="d-tooltip"] {
+  color: var(--primary);
+  background: var(--secondary);
+  border: 1px solid var(--primary-low);
+  box-shadow: shadow("menu-panel");
+}

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/rich-tooltip.hbs

@@ -0,0 +1,9 @@
+<StyleguideExample @title="rich-tooltip">
+  <DButton>
+    {{i18n "styleguide.sections.rich_tooltip.hover_to_see"}}
+    <DTooltip>
+      <h3>{{i18n "styleguide.sections.rich_tooltip.header"}}</h3>
+      {{i18n "styleguide.sections.rich_tooltip.description"}}
+    </DTooltip>
+  </DButton>
+</StyleguideExample>

plugins/styleguide/config/locales/client.en.yml

@@ -83,3 +83,8 @@ en:
           title: "Spinners"
         empty_state:
           title: "Empty State"
+        rich_tooltip:
+          title: "Rich Tooltip"
+          description: "Description"
+          header: "Header"
+          hover_to_see: "Hover to see a tooltip"