@juspay/svelte-ui-components 2.24.0 → 2.25.0
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.
|
@@ -7,7 +7,9 @@
|
|
|
7
7
|
delay = 0,
|
|
8
8
|
testId,
|
|
9
9
|
classes,
|
|
10
|
-
children
|
|
10
|
+
children,
|
|
11
|
+
icon,
|
|
12
|
+
content
|
|
11
13
|
}: TooltipProperties = $props();
|
|
12
14
|
|
|
13
15
|
let visible = $state(false);
|
|
@@ -41,11 +43,18 @@
|
|
|
41
43
|
onfocusout={hideTooltip}
|
|
42
44
|
data-pw={testId}
|
|
43
45
|
>
|
|
46
|
+
{#if typeof icon === 'function'}
|
|
47
|
+
<span class="tooltip-icon" aria-hidden="true">{@render icon()}</span>
|
|
48
|
+
{/if}
|
|
44
49
|
{@render children()}
|
|
45
50
|
{#if visible}
|
|
46
51
|
<div class="tooltip-bubble {position}" role="tooltip">
|
|
47
52
|
<div class="tooltip-arrow"></div>
|
|
48
|
-
|
|
53
|
+
{#if typeof content === 'function'}
|
|
54
|
+
{@render content()}
|
|
55
|
+
{:else}
|
|
56
|
+
<span class="tooltip-text">{text}</span>
|
|
57
|
+
{/if}
|
|
49
58
|
</div>
|
|
50
59
|
{/if}
|
|
51
60
|
</div>
|
|
@@ -56,6 +65,11 @@
|
|
|
56
65
|
display: var(--tooltip-container-display, inline-flex);
|
|
57
66
|
}
|
|
58
67
|
|
|
68
|
+
.tooltip-icon {
|
|
69
|
+
display: contents;
|
|
70
|
+
color: var(--tooltip-icon-color, currentColor);
|
|
71
|
+
}
|
|
72
|
+
|
|
59
73
|
.tooltip-bubble {
|
|
60
74
|
position: absolute;
|
|
61
75
|
z-index: var(--tooltip-z-index, 1000);
|
|
@@ -9,5 +9,9 @@ export type OptionalTooltipProperties = {
|
|
|
9
9
|
delay?: number;
|
|
10
10
|
testId?: string | null;
|
|
11
11
|
classes?: string;
|
|
12
|
+
/** Snippet rendered as a leading icon in the trigger wrapper. No default glyph is provided — consumers supply their own. */
|
|
13
|
+
icon?: Snippet;
|
|
14
|
+
/** Snippet rendered as the bubble body. When provided, replaces the plain `text` string inside the tooltip bubble. */
|
|
15
|
+
content?: Snippet;
|
|
12
16
|
};
|
|
13
17
|
export type TooltipProperties = MandatoryTooltipProperties & OptionalTooltipProperties;
|