@milkdown/plugin-tooltip 7.0.0-next.0 → 7.0.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var c = (o, t, e) => (
|
|
1
|
+
var R = Object.defineProperty;
|
|
2
|
+
var S = (o, t, e) => t in o ? R(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
|
|
3
|
+
var c = (o, t, e) => (S(o, typeof t != "symbol" ? t + "" : t, e), e), x = (o, t, e) => {
|
|
4
4
|
if (!t.has(o))
|
|
5
5
|
throw TypeError("Cannot " + e);
|
|
6
6
|
};
|
|
@@ -10,39 +10,39 @@ var n = (o, t, e) => (x(o, t, "read from private field"), e ? e.call(o) : t.get(
|
|
|
10
10
|
t instanceof WeakSet ? t.add(o) : t.set(o, e);
|
|
11
11
|
}, p = (o, t, e, s) => (x(o, t, "write to private field"), s ? s.call(o, e) : t.set(o, e), e);
|
|
12
12
|
var $ = (o, t, e) => (x(o, t, "access private method"), e);
|
|
13
|
-
import { posToDOMRect as
|
|
14
|
-
import { TextSelection as
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import { $ctx as
|
|
13
|
+
import { posToDOMRect as _ } from "@milkdown/prose";
|
|
14
|
+
import { TextSelection as w, Plugin as C, PluginKey as E } from "@milkdown/prose/state";
|
|
15
|
+
import F from "lodash.debounce";
|
|
16
|
+
import I from "tippy.js";
|
|
17
|
+
import { $ctx as M, $prose as q } from "@milkdown/utils";
|
|
18
18
|
var i, m, u, a, y, f, b;
|
|
19
|
-
class
|
|
19
|
+
class j {
|
|
20
20
|
constructor(t) {
|
|
21
21
|
r(this, f);
|
|
22
22
|
r(this, i, void 0);
|
|
23
|
-
c(this, "element");
|
|
24
23
|
r(this, m, void 0);
|
|
25
24
|
r(this, u, void 0);
|
|
26
25
|
r(this, a, void 0);
|
|
26
|
+
c(this, "element");
|
|
27
27
|
r(this, y, (t, e) => {
|
|
28
|
-
const { state: s, composing: l } = t, { selection: h, doc: g } = s, { ranges: d } = h, T = Math.min(...d.map((k) => k.$from.pos)),
|
|
29
|
-
if (n(this, i) ?? p(this, i,
|
|
28
|
+
const { state: s, composing: l } = t, { selection: h, doc: g } = s, { ranges: d } = h, T = Math.min(...d.map((k) => k.$from.pos)), P = Math.max(...d.map((k) => k.$to.pos)), O = e && e.doc.eq(g) && e.selection.eq(h);
|
|
29
|
+
if (n(this, i) ?? p(this, i, I(t.dom, {
|
|
30
30
|
trigger: "manual",
|
|
31
31
|
interactive: !0,
|
|
32
32
|
...n(this, m),
|
|
33
33
|
content: this.element
|
|
34
|
-
})), !(l ||
|
|
34
|
+
})), !(l || O)) {
|
|
35
35
|
if (!n(this, a).call(this, t, e)) {
|
|
36
36
|
this.hide();
|
|
37
37
|
return;
|
|
38
38
|
}
|
|
39
39
|
n(this, i).setProps({
|
|
40
|
-
getReferenceClientRect: () =>
|
|
40
|
+
getReferenceClientRect: () => _(t, T, P)
|
|
41
41
|
}), this.show();
|
|
42
42
|
}
|
|
43
43
|
});
|
|
44
44
|
c(this, "update", (t, e) => {
|
|
45
|
-
|
|
45
|
+
F(n(this, y), n(this, u))(t, e);
|
|
46
46
|
});
|
|
47
47
|
c(this, "destroy", () => {
|
|
48
48
|
var t;
|
|
@@ -61,22 +61,21 @@ class W {
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
i = new WeakMap(), m = new WeakMap(), u = new WeakMap(), a = new WeakMap(), y = new WeakMap(), f = new WeakSet(), b = function(t) {
|
|
64
|
-
const { doc: e, selection: s } = t.state, { empty: l, from: h, to: g } = s, d = !e.textBetween(h, g).length && t.state.selection instanceof
|
|
65
|
-
return !(
|
|
64
|
+
const { doc: e, selection: s } = t.state, { empty: l, from: h, to: g } = s, d = !e.textBetween(h, g).length && t.state.selection instanceof w, T = this.element.contains(document.activeElement), P = !t.hasFocus() && !T, O = !t.editable;
|
|
65
|
+
return !(P || l || d || O);
|
|
66
66
|
};
|
|
67
|
-
const
|
|
68
|
-
const t =
|
|
67
|
+
const z = (o) => {
|
|
68
|
+
const t = M({}, `${o}_TOOLTIP_SPEC`), e = q((l) => {
|
|
69
69
|
const h = l.get(t.key);
|
|
70
|
-
return new
|
|
71
|
-
key: new
|
|
70
|
+
return new C({
|
|
71
|
+
key: new E(`${o}_TOOLTIP`),
|
|
72
72
|
...h
|
|
73
73
|
});
|
|
74
74
|
}), s = [t, e];
|
|
75
75
|
return s.key = t.key, s.pluginKey = e.key, s;
|
|
76
|
-
}
|
|
76
|
+
};
|
|
77
77
|
export {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
L as tooltipFactory
|
|
78
|
+
j as TooltipProvider,
|
|
79
|
+
z as tooltipFactory
|
|
81
80
|
};
|
|
82
81
|
//# sourceMappingURL=index.es.js.map
|
package/lib/index.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../src/tooltip-provider.ts","../src/tooltip-plugin.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { posToDOMRect } from '@milkdown/prose'\nimport type { EditorState } from '@milkdown/prose/state'\nimport { TextSelection } from '@milkdown/prose/state'\nimport type { EditorView } from '@milkdown/prose/view'\nimport debounce from 'lodash.debounce'\nimport type { Instance, Props } from 'tippy.js'\nimport tippy from 'tippy.js'\n\nexport type TooltipProviderOptions = {\n content: HTMLElement\n tippyOptions?: Partial<Props>\n debounce?: number\n shouldShow?: (view: EditorView, prevState?: EditorState) => boolean\n}\n\nexport class TooltipProvider {\n #tippy: Instance | undefined\n\n
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../src/tooltip-provider.ts","../src/tooltip-plugin.ts"],"sourcesContent":["/* Copyright 2021, Milkdown by Mirone. */\nimport { posToDOMRect } from '@milkdown/prose'\nimport type { EditorState } from '@milkdown/prose/state'\nimport { TextSelection } from '@milkdown/prose/state'\nimport type { EditorView } from '@milkdown/prose/view'\nimport debounce from 'lodash.debounce'\nimport type { Instance, Props } from 'tippy.js'\nimport tippy from 'tippy.js'\n\n/// Options for tooltip provider.\nexport type TooltipProviderOptions = {\n /// The tooltip content.\n content: HTMLElement\n /// The options for creating [tippy.js](https://atomiks.github.io/tippyjs/) instance.\n tippyOptions?: Partial<Props>\n /// The debounce time for updating tooltip, 200ms by default.\n debounce?: number\n /// The function to determine whether the tooltip should be shown.\n shouldShow?: (view: EditorView, prevState?: EditorState) => boolean\n}\n\n/// A provider for creating tooltip.\nexport class TooltipProvider {\n /// @internal\n #tippy: Instance | undefined\n\n /// @internal\n #tippyOptions: Partial<Props>\n\n /// @internal\n #debounce: number\n\n /// @internal\n #shouldShow: (view: EditorView, prevState?: EditorState) => boolean\n\n /// The root element of the tooltip.\n element: HTMLElement\n\n constructor(options: TooltipProviderOptions) {\n this.element = options.content\n this.#tippyOptions = options.tippyOptions ?? {}\n this.#debounce = options.debounce ?? 200\n this.#shouldShow = options.shouldShow ?? this.#_shouldShow\n }\n\n /// @internal\n #onUpdate = (view: EditorView, prevState?: EditorState): void => {\n const { state, composing } = view\n const { selection, doc } = state\n const { ranges } = selection\n const from = Math.min(...ranges.map(range => range.$from.pos))\n const to = Math.max(...ranges.map(range => range.$to.pos))\n const isSame = prevState && prevState.doc.eq(doc) && prevState.selection.eq(selection)\n\n this.#tippy ??= tippy(view.dom, {\n trigger: 'manual',\n interactive: true,\n ...this.#tippyOptions,\n content: this.element,\n })\n\n if (composing || isSame)\n return\n\n if (!this.#shouldShow(view, prevState)) {\n this.hide()\n return\n }\n\n this.#tippy.setProps({\n getReferenceClientRect: () => posToDOMRect(view, from, to),\n })\n\n this.show()\n }\n\n /// Update provider state by editor view.\n update = (view: EditorView, prevState?: EditorState): void => {\n const updater = debounce(this.#onUpdate, this.#debounce)\n\n updater(view, prevState)\n }\n\n /// @internal\n #_shouldShow(view: EditorView): boolean {\n const { doc, selection } = view.state\n const { empty, from, to } = selection\n\n const isEmptyTextBlock = !doc.textBetween(from, to).length && view.state.selection instanceof TextSelection\n\n const isTooltipChildren = this.element.contains(document.activeElement)\n\n const notHasFocus = !view.hasFocus() && !isTooltipChildren\n\n const isReadonly = !view.editable\n\n if (\n notHasFocus\n || empty\n || isEmptyTextBlock\n || isReadonly\n )\n return false\n\n return true\n }\n\n /// Destroy the tooltip.\n destroy = () => {\n this.#tippy?.destroy()\n }\n\n /// Show the tooltip.\n show = () => {\n this.#tippy?.show()\n }\n\n /// Hide the tooltip.\n hide = () => {\n this.#tippy?.hide()\n }\n\n /// Get the [tippy.js](https://atomiks.github.io/tippyjs/) instance.\n getInstance = () => {\n return this.#tippy\n }\n}\n","/* Copyright 2021, Milkdown by Mirone. */\nimport type { SliceType } from '@milkdown/ctx'\nimport type { PluginSpec } from '@milkdown/prose/state'\nimport { Plugin, PluginKey } from '@milkdown/prose/state'\nimport type { $Ctx, $Prose } from '@milkdown/utils'\nimport { $ctx, $prose } from '@milkdown/utils'\n\n/// @internal\nexport type TooltipSpecId<Id extends string> = `${Id}_TOOLTIP_SPEC`\n\n/// @internal\nexport type TooltipPlugin<Id extends string, State = any> = [$Ctx<PluginSpec<State>, TooltipSpecId<Id>>, $Prose] & {\n key: SliceType<PluginSpec<State>, TooltipSpecId<Id>>\n pluginKey: $Prose['key']\n}\n\n/// Create a tooltip plugin with a unique id.\nexport const tooltipFactory = <Id extends string, State = any>(id: Id) => {\n const tooltipSpec = $ctx<PluginSpec<State>, TooltipSpecId<Id>>({}, `${id}_TOOLTIP_SPEC`)\n const tooltipPlugin = $prose((ctx) => {\n const spec = ctx.get(tooltipSpec.key)\n return new Plugin({\n key: new PluginKey(`${id}_TOOLTIP`),\n ...spec,\n })\n })\n const result = [tooltipSpec, tooltipPlugin] as TooltipPlugin<Id>\n result.key = tooltipSpec.key\n result.pluginKey = tooltipPlugin.key\n\n return result\n}\n"],"names":["TooltipProvider","options","__privateAdd","__shouldShow","_tippy","_tippyOptions","_debounce","_shouldShow","__publicField","_onUpdate","view","prevState","state","composing","selection","doc","ranges","from","range","to","isSame","__privateGet","__privateSet","tippy","posToDOMRect","debounce","_a","__privateMethod","_shouldShow_fn","empty","isEmptyTextBlock","TextSelection","isTooltipChildren","notHasFocus","isReadonly","tooltipFactory","id","tooltipSpec","$ctx","tooltipPlugin","$prose","ctx","spec","Plugin","PluginKey","result"],"mappings":"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"}
|
package/lib/tooltip-plugin.d.ts
CHANGED
|
@@ -7,5 +7,4 @@ export type TooltipPlugin<Id extends string, State = any> = [$Ctx<PluginSpec<Sta
|
|
|
7
7
|
pluginKey: $Prose['key'];
|
|
8
8
|
};
|
|
9
9
|
export declare const tooltipFactory: <Id extends string, State = any>(id: Id) => TooltipPlugin<Id, any>;
|
|
10
|
-
export declare const tooltip: TooltipPlugin<"MILKDOWN", any>;
|
|
11
10
|
//# sourceMappingURL=tooltip-plugin.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-plugin.d.ts","sourceRoot":"","sources":["../src/tooltip-plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"tooltip-plugin.d.ts","sourceRoot":"","sources":["../src/tooltip-plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAEvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA;AAInD,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,MAAM,IAAI,GAAG,EAAE,eAAe,CAAA;AAGnE,MAAM,MAAM,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG;IACjH,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,EAAE,CAAC,CAAC,CAAA;IACpD,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;CACzB,CAAA;AAGD,eAAO,MAAM,cAAc,oEAc1B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-provider.d.ts","sourceRoot":"","sources":["../src/tooltip-provider.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"tooltip-provider.d.ts","sourceRoot":"","sources":["../src/tooltip-provider.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEtD,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAI/C,MAAM,MAAM,sBAAsB,GAAG;IAEnC,OAAO,EAAE,WAAW,CAAA;IAEpB,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAE7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,EAAE,WAAW,KAAK,OAAO,CAAA;CACpE,CAAA;AAGD,qBAAa,eAAe;;IAc1B,OAAO,EAAE,WAAW,CAAA;gBAER,OAAO,EAAE,sBAAsB;IAuC3C,MAAM,SAAU,UAAU,cAAc,WAAW,KAAG,IAAI,CAIzD;IA2BD,OAAO,aAEN;IAGD,IAAI,aAEH;IAGD,IAAI,aAEH;IAGD,WAAW,oCAEV;CACF"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milkdown/plugin-tooltip",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "7.0.0-next.
|
|
4
|
+
"version": "7.0.0-next.1",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
"lodash.debounce": "^4.0.8",
|
|
30
30
|
"tippy.js": "^6.3.7",
|
|
31
31
|
"tslib": "^2.4.0",
|
|
32
|
-
"@milkdown/exception": "7.0.0-next.
|
|
33
|
-
"@milkdown/utils": "7.0.0-next.
|
|
32
|
+
"@milkdown/exception": "7.0.0-next.1",
|
|
33
|
+
"@milkdown/utils": "7.0.0-next.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@milkdown/core": "7.0.0-next.
|
|
37
|
-
"@milkdown/ctx": "7.0.0-next.
|
|
38
|
-
"@milkdown/prose": "7.0.0-next.
|
|
36
|
+
"@milkdown/core": "7.0.0-next.1",
|
|
37
|
+
"@milkdown/ctx": "7.0.0-next.1",
|
|
38
|
+
"@milkdown/prose": "7.0.0-next.1"
|
|
39
39
|
},
|
|
40
40
|
"nx": {
|
|
41
41
|
"targets": {
|
package/src/tooltip-plugin.ts
CHANGED
|
@@ -5,13 +5,16 @@ import { Plugin, PluginKey } from '@milkdown/prose/state'
|
|
|
5
5
|
import type { $Ctx, $Prose } from '@milkdown/utils'
|
|
6
6
|
import { $ctx, $prose } from '@milkdown/utils'
|
|
7
7
|
|
|
8
|
+
/// @internal
|
|
8
9
|
export type TooltipSpecId<Id extends string> = `${Id}_TOOLTIP_SPEC`
|
|
9
10
|
|
|
11
|
+
/// @internal
|
|
10
12
|
export type TooltipPlugin<Id extends string, State = any> = [$Ctx<PluginSpec<State>, TooltipSpecId<Id>>, $Prose] & {
|
|
11
13
|
key: SliceType<PluginSpec<State>, TooltipSpecId<Id>>
|
|
12
14
|
pluginKey: $Prose['key']
|
|
13
15
|
}
|
|
14
16
|
|
|
17
|
+
/// Create a tooltip plugin with a unique id.
|
|
15
18
|
export const tooltipFactory = <Id extends string, State = any>(id: Id) => {
|
|
16
19
|
const tooltipSpec = $ctx<PluginSpec<State>, TooltipSpecId<Id>>({}, `${id}_TOOLTIP_SPEC`)
|
|
17
20
|
const tooltipPlugin = $prose((ctx) => {
|
|
@@ -27,5 +30,3 @@ export const tooltipFactory = <Id extends string, State = any>(id: Id) => {
|
|
|
27
30
|
|
|
28
31
|
return result
|
|
29
32
|
}
|
|
30
|
-
|
|
31
|
-
export const tooltip = tooltipFactory('MILKDOWN')
|
package/src/tooltip-provider.ts
CHANGED
|
@@ -7,24 +7,35 @@ import debounce from 'lodash.debounce'
|
|
|
7
7
|
import type { Instance, Props } from 'tippy.js'
|
|
8
8
|
import tippy from 'tippy.js'
|
|
9
9
|
|
|
10
|
+
/// Options for tooltip provider.
|
|
10
11
|
export type TooltipProviderOptions = {
|
|
12
|
+
/// The tooltip content.
|
|
11
13
|
content: HTMLElement
|
|
14
|
+
/// The options for creating [tippy.js](https://atomiks.github.io/tippyjs/) instance.
|
|
12
15
|
tippyOptions?: Partial<Props>
|
|
16
|
+
/// The debounce time for updating tooltip, 200ms by default.
|
|
13
17
|
debounce?: number
|
|
18
|
+
/// The function to determine whether the tooltip should be shown.
|
|
14
19
|
shouldShow?: (view: EditorView, prevState?: EditorState) => boolean
|
|
15
20
|
}
|
|
16
21
|
|
|
22
|
+
/// A provider for creating tooltip.
|
|
17
23
|
export class TooltipProvider {
|
|
24
|
+
/// @internal
|
|
18
25
|
#tippy: Instance | undefined
|
|
19
26
|
|
|
20
|
-
|
|
21
|
-
|
|
27
|
+
/// @internal
|
|
22
28
|
#tippyOptions: Partial<Props>
|
|
23
29
|
|
|
30
|
+
/// @internal
|
|
24
31
|
#debounce: number
|
|
25
32
|
|
|
33
|
+
/// @internal
|
|
26
34
|
#shouldShow: (view: EditorView, prevState?: EditorState) => boolean
|
|
27
35
|
|
|
36
|
+
/// The root element of the tooltip.
|
|
37
|
+
element: HTMLElement
|
|
38
|
+
|
|
28
39
|
constructor(options: TooltipProviderOptions) {
|
|
29
40
|
this.element = options.content
|
|
30
41
|
this.#tippyOptions = options.tippyOptions ?? {}
|
|
@@ -32,6 +43,7 @@ export class TooltipProvider {
|
|
|
32
43
|
this.#shouldShow = options.shouldShow ?? this.#_shouldShow
|
|
33
44
|
}
|
|
34
45
|
|
|
46
|
+
/// @internal
|
|
35
47
|
#onUpdate = (view: EditorView, prevState?: EditorState): void => {
|
|
36
48
|
const { state, composing } = view
|
|
37
49
|
const { selection, doc } = state
|
|
@@ -62,12 +74,14 @@ export class TooltipProvider {
|
|
|
62
74
|
this.show()
|
|
63
75
|
}
|
|
64
76
|
|
|
77
|
+
/// Update provider state by editor view.
|
|
65
78
|
update = (view: EditorView, prevState?: EditorState): void => {
|
|
66
79
|
const updater = debounce(this.#onUpdate, this.#debounce)
|
|
67
80
|
|
|
68
81
|
updater(view, prevState)
|
|
69
82
|
}
|
|
70
83
|
|
|
84
|
+
/// @internal
|
|
71
85
|
#_shouldShow(view: EditorView): boolean {
|
|
72
86
|
const { doc, selection } = view.state
|
|
73
87
|
const { empty, from, to } = selection
|
|
@@ -91,18 +105,22 @@ export class TooltipProvider {
|
|
|
91
105
|
return true
|
|
92
106
|
}
|
|
93
107
|
|
|
108
|
+
/// Destroy the tooltip.
|
|
94
109
|
destroy = () => {
|
|
95
110
|
this.#tippy?.destroy()
|
|
96
111
|
}
|
|
97
112
|
|
|
113
|
+
/// Show the tooltip.
|
|
98
114
|
show = () => {
|
|
99
115
|
this.#tippy?.show()
|
|
100
116
|
}
|
|
101
117
|
|
|
118
|
+
/// Hide the tooltip.
|
|
102
119
|
hide = () => {
|
|
103
120
|
this.#tippy?.hide()
|
|
104
121
|
}
|
|
105
122
|
|
|
123
|
+
/// Get the [tippy.js](https://atomiks.github.io/tippyjs/) instance.
|
|
106
124
|
getInstance = () => {
|
|
107
125
|
return this.#tippy
|
|
108
126
|
}
|