diff --git a/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-tooltip-test.js b/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-tooltip-test.js
index d02797c2209..3f3959d2e7b 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-tooltip-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/float-kit/d-tooltip-test.js
@@ -18,6 +18,10 @@ module("Integration | Component | FloatKit | d-tooltip", function (hooks) {
await triggerEvent(".fk-d-tooltip__trigger", "mousemove");
}
+ async function leave() {
+ await triggerEvent(".fk-d-tooltip__trigger", "mouseleave");
+ }
+
async function close() {
await triggerKeyEvent(document.activeElement, "keydown", "Escape");
}
@@ -240,4 +244,40 @@ module("Integration | Component | FloatKit | d-tooltip", function (hooks) {
assert.dom(".fk-d-tooltip__content.test-content").doesNotExist();
});
+
+ test("a tooltip is triggered/untriggered by click on mobile", async function (assert) {
+ this.site.mobileView = true;
+
+ await render(hbs``);
+ await click(".fk-d-tooltip__trigger");
+
+ assert.dom(".fk-d-tooltip__content").exists();
+
+ await click(".fk-d-tooltip__trigger");
+
+ assert.dom(".fk-d-tooltip__content").doesNotExist();
+ });
+
+ test("a tooltip is triggered/untriggered by click on desktop", async function (assert) {
+ await render(hbs``);
+ await click(".fk-d-tooltip__trigger");
+
+ assert.dom(".fk-d-tooltip__content").exists();
+
+ await click(".fk-d-tooltip__trigger");
+
+ assert.dom(".fk-d-tooltip__content").doesNotExist();
+ });
+
+ test("a tooltip is triggered/untriggered by hover on desktop", async function (assert) {
+ await render(hbs``);
+
+ await hover();
+
+ assert.dom(".fk-d-tooltip__content").exists();
+
+ await leave();
+
+ assert.dom(".fk-d-tooltip__content").doesNotExist();
+ });
});
diff --git a/app/assets/javascripts/float-kit/addon/lib/constants.js b/app/assets/javascripts/float-kit/addon/lib/constants.js
index ed7db412926..9f68c8d3ed3 100644
--- a/app/assets/javascripts/float-kit/addon/lib/constants.js
+++ b/app/assets/javascripts/float-kit/addon/lib/constants.js
@@ -29,8 +29,8 @@ export const TOOLTIP = {
maxWidth: 350,
data: null,
offset: 10,
- triggers: ["hover", "click"],
- untriggers: ["hover", "click"],
+ triggers: { mobile: ["click"], desktop: ["hover", "click"] },
+ untriggers: { mobile: ["click"], desktop: ["hover", "click"] },
placement: "top",
fallbackPlacements: FLOAT_UI_PLACEMENTS,
autoUpdate: true,
diff --git a/app/assets/javascripts/float-kit/addon/lib/float-kit-instance.js b/app/assets/javascripts/float-kit/addon/lib/float-kit-instance.js
index a6cfe6bc215..71c26952921 100644
--- a/app/assets/javascripts/float-kit/addon/lib/float-kit-instance.js
+++ b/app/assets/javascripts/float-kit/addon/lib/float-kit-instance.js
@@ -1,6 +1,7 @@
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { cancel } from "@ember/runloop";
+import { service } from "@ember/service";
import { makeArray } from "discourse-common/lib/helpers";
import discourseLater from "discourse-common/lib/later";
import { bind } from "discourse-common/utils/decorators";
@@ -13,6 +14,8 @@ function cancelEvent(event) {
}
export default class FloatKitInstance {
+ @service site;
+
@tracked id = null;
@action
@@ -197,10 +200,28 @@ export default class FloatKitInstance {
}
get triggers() {
+ if (
+ typeof this.options.triggers === "object" &&
+ !Array.isArray(this.options.triggers)
+ ) {
+ return this.site.mobileView
+ ? this.options.triggers.mobile ?? ["click"]
+ : this.options.triggers.desktop ?? ["click"];
+ }
+
return this.options.triggers ?? ["click"];
}
get untriggers() {
+ if (
+ typeof this.options.untriggers === "object" &&
+ !Array.isArray(this.options.untriggers)
+ ) {
+ return this.site.mobileView
+ ? this.options.untriggers.mobile ?? ["click"]
+ : this.options.untriggers.desktop ?? ["click"];
+ }
+
return this.options.untriggers ?? ["click"];
}
}