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"]; } }