diff options
| author | Jo-Philipp Wich <jo@mein.io> | 2018-12-07 17:57:45 +0100 |
|---|---|---|
| committer | Jo-Philipp Wich <jo@mein.io> | 2018-12-10 13:41:34 +0100 |
| commit | a7dcfbe06be893fa05fc1cfc675c774ff858e5d2 (patch) | |
| tree | ce3acb65c949be1ef5b0efc22b32c366c35a1c58 | |
| parent | df9ba6981ee224ca37591469cf658db786b031b9 (diff) | |
luci-base: luci.js: emit custom events for tooltip open/close actions
The new `tooltip-open` and `tooltip-close` events allow other code to hook
into the tooltip div rendering, e.g. to populate it with custom markup.
Also ignore tooltip events originating from descendant elements while
we're at it.
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
| -rw-r--r-- | modules/luci-base/htdocs/luci-static/resources/luci.js | 10 |
1 files changed, 9 insertions, 1 deletions
diff --git a/modules/luci-base/htdocs/luci-static/resources/luci.js b/modules/luci-base/htdocs/luci-static/resources/luci.js index 04c460182..c1c1b0dd3 100644 --- a/modules/luci-base/htdocs/luci-static/resources/luci.js +++ b/modules/luci-base/htdocs/luci-static/resources/luci.js @@ -129,10 +129,16 @@ tooltipDiv.style.top = y + 'px'; tooltipDiv.style.left = x + 'px'; tooltipDiv.style.opacity = 1; + + tooltipDiv.dispatchEvent(new CustomEvent('tooltip-open', { + bubbles: true, + detail: { target: target } + })); }, hideTooltip: function(ev) { - if (ev.target === tooltipDiv || ev.relatedTarget === tooltipDiv) + if (ev.target === tooltipDiv || ev.relatedTarget === tooltipDiv || + tooltipDiv.contains(ev.target) || tooltipDiv.contains(ev.relatedTarget)) return; if (tooltipTimeout !== null) { @@ -142,6 +148,8 @@ tooltipDiv.style.opacity = 0; tooltipTimeout = window.setTimeout(function() { tooltipDiv.removeAttribute('style'); }, 250); + + tooltipDiv.dispatchEvent(new CustomEvent('tooltip-close', { bubbles: true })); }, |