contain-css-svelte 1.1.8 → 1.1.9
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/dist/overlays/Tooltip.svelte +44 -14
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<script lang="ts">
|
|
1
|
+
<script lang="ts">import { tick } from "svelte";
|
|
2
2
|
let tooltipDiv = $state();
|
|
3
3
|
let targetDiv = $state();
|
|
4
4
|
let tooltipMeasurementDiv = $state();
|
|
@@ -7,7 +7,29 @@ let { tooltipText = "", vertical = "bottom", horizontal = "right", children, too
|
|
|
7
7
|
let renderedVertical = $state(vertical);
|
|
8
8
|
// svelte-ignore state_referenced_locally
|
|
9
9
|
let renderedHorizontal = $state(horizontal);
|
|
10
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Tooltip content mounts on first show, not on mount. A page with many
|
|
12
|
+
* tooltips (e.g. a grid of cells each carrying a rich tooltip snippet)
|
|
13
|
+
* would otherwise build every tooltip twice — popover + measurement copy —
|
|
14
|
+
* before the user hovers anything. Once shown, content stays mounted.
|
|
15
|
+
*/
|
|
16
|
+
let hasRendered = $state(false);
|
|
17
|
+
/** Guards against the pointer/focus leaving while content mounts. */
|
|
18
|
+
let wantsShow = false;
|
|
19
|
+
function hidePopover() {
|
|
20
|
+
wantsShow = false;
|
|
21
|
+
tooltipDiv?.togglePopover(false);
|
|
22
|
+
}
|
|
23
|
+
async function showPopover() {
|
|
24
|
+
wantsShow = true;
|
|
25
|
+
if (!hasRendered) {
|
|
26
|
+
hasRendered = true;
|
|
27
|
+
// Wait for the content to exist before measuring it — positioning below
|
|
28
|
+
// reads the measurement element's height/width to decide flip direction.
|
|
29
|
+
await tick();
|
|
30
|
+
if (!wantsShow)
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
11
33
|
// Get the position of the target element
|
|
12
34
|
// with respect to our screen
|
|
13
35
|
if (!targetDiv?.children[0])
|
|
@@ -75,9 +97,9 @@ function showPopover() {
|
|
|
75
97
|
<div
|
|
76
98
|
class="tooltip-wrapper"
|
|
77
99
|
onmouseenter={() => showPopover()}
|
|
78
|
-
onmouseleave={() => (
|
|
100
|
+
onmouseleave={() => hidePopover()}
|
|
79
101
|
onfocusin={() => showPopover()}
|
|
80
|
-
onfocusout={() => (
|
|
102
|
+
onfocusout={() => hidePopover()}
|
|
81
103
|
bind:this={targetDiv}
|
|
82
104
|
>
|
|
83
105
|
{@render children?.()}
|
|
@@ -90,13 +112,17 @@ function showPopover() {
|
|
|
90
112
|
class:left={renderedHorizontal === "left"}
|
|
91
113
|
class:right={renderedHorizontal === "right"}
|
|
92
114
|
>
|
|
93
|
-
{#if
|
|
94
|
-
{
|
|
115
|
+
{#if hasRendered}
|
|
116
|
+
{#if tooltip}{@render tooltip()}{:else}
|
|
117
|
+
{tooltipText}
|
|
118
|
+
{/if}
|
|
95
119
|
{/if}
|
|
96
120
|
</div>
|
|
97
121
|
<div class="tooltip invisible measure" bind:this={tooltipMeasurementDiv}>
|
|
98
|
-
{#if
|
|
99
|
-
{
|
|
122
|
+
{#if hasRendered}
|
|
123
|
+
{#if tooltip}{@render tooltip()}{:else}
|
|
124
|
+
{tooltipText}
|
|
125
|
+
{/if}
|
|
100
126
|
{/if}
|
|
101
127
|
</div>
|
|
102
128
|
</div>
|
|
@@ -105,9 +131,9 @@ function showPopover() {
|
|
|
105
131
|
<span
|
|
106
132
|
class="tooltip-wrapper"
|
|
107
133
|
onmouseenter={() => showPopover()}
|
|
108
|
-
onmouseleave={() => (
|
|
134
|
+
onmouseleave={() => hidePopover()}
|
|
109
135
|
onfocusin={() => showPopover()}
|
|
110
|
-
onfocusout={() => (
|
|
136
|
+
onfocusout={() => hidePopover()}
|
|
111
137
|
bind:this={targetDiv}
|
|
112
138
|
>
|
|
113
139
|
{@render children?.()}
|
|
@@ -120,13 +146,17 @@ function showPopover() {
|
|
|
120
146
|
class:left={renderedHorizontal === "left"}
|
|
121
147
|
class:right={renderedHorizontal === "right"}
|
|
122
148
|
>
|
|
123
|
-
{#if
|
|
124
|
-
{
|
|
149
|
+
{#if hasRendered}
|
|
150
|
+
{#if tooltip}{@render tooltip()}{:else}
|
|
151
|
+
{tooltipText}
|
|
152
|
+
{/if}
|
|
125
153
|
{/if}
|
|
126
154
|
</span>
|
|
127
155
|
<span class="tooltip invisible measure" bind:this={tooltipMeasurementDiv}>
|
|
128
|
-
{#if
|
|
129
|
-
{
|
|
156
|
+
{#if hasRendered}
|
|
157
|
+
{#if tooltip}{@render tooltip()}{:else}
|
|
158
|
+
{tooltipText}
|
|
159
|
+
{/if}
|
|
130
160
|
{/if}
|
|
131
161
|
</span>
|
|
132
162
|
</span>
|