@finsweet/webflow-apps-utils 1.0.14 → 1.0.16

package/dist/ui/components/button/Button.svelte

@@ -122,7 +122,7 @@
 	let hasRightIcon = $derived(!!rightIcon);
 	let hasText = $derived(!!text);
 	let currentText = $derived(loading ? loadingText : text);
-	let shouldShowTooltip = $derived(!!tooltip?.message || !!tooltip?.tooltipContent);
+	let shouldShowTooltip = $derived(!!tooltip?.message || !!tooltip?.tooltip);
 
 	// Default styling (no size variations)
 	let computedPadding = $derived(padding || '4px 8px');
@@ -148,7 +148,7 @@
 </script>
 
 {#if shouldShowTooltip}
-	<Tooltip {...tooltip}>
+	<Tooltip {...tooltip} stopPropagation={false}>
 		{#snippet target()}
 			<button
 				bind:this={buttonElement}

package/dist/ui/components/button/types.d.ts

@@ -15,7 +15,7 @@ export interface ButtonProps {
     class?: string;
     loadingText?: string;
     fullWidth?: boolean;
-    tooltipContent?: string;
+    tooltip?: string;
     invalid?: boolean;
     style?: string;
     ariaLabel?: string;

package/dist/ui/components/color-picker/ColorPicker.svelte

@@ -171,7 +171,7 @@
 				<div class="color-swatch" style="background-color: {color || '#000000'}"></div>
 			</div>
 		{/snippet}
-		{#snippet tooltipContent()}
+		{#snippet tooltip()}
 			<ColorSelect {color} oncolorchange={handleFullColorChange} />
 		{/snippet}
 	</Tooltip>

package/dist/ui/components/controlled-buttons/ControlledButtons.svelte

@@ -23,6 +23,7 @@
 						listener={button.popupTrigger || 'click'}
 						listenerout={button.popupTrigger || 'click'}
 						width="210px"
+						stopPropagation={false}
 					>
 						{#snippet target()}
 							<Button
@@ -34,7 +35,7 @@
 								class="popup-button-chevron"
 							/>
 						{/snippet}
-						{#snippet tooltipContent()}
+						{#snippet tooltip()}
 							<div role="button" tabindex="0" class="popup-content">
 								<div class="popup-content-list">
 									{#each button.popupButtons || [] as popupButton, popupIndex (popupIndex)}
@@ -84,6 +85,7 @@
 						placement={button.tooltip?.placement || 'top'}
 						offsetVal={10}
 						showArrow={button.tooltip?.showArrow !== false}
+						stopPropagation={false}
 					>
 						{#snippet target()}
 							<Button
@@ -94,7 +96,7 @@
 								onclick={button.onClick || (() => {})}
 							/>
 						{/snippet}
-						{#snippet tooltipContent()}
+						{#snippet tooltip()}
 							<div
 								class="tooltip-content {button.tooltip?.className || ''}"
 								style="display: {button.tooltip?.icon ? 'grid' : 'inline-block'}"
@@ -186,6 +188,7 @@
 		min-width: 150px;
 		background: var(--background);
 		border-radius: 4px;
+		width: 100%;
 	}
 	.popup-content-icon {
 		display: flex;

package/dist/ui/components/layout/examples/ExampleLayout.svelte

@@ -10,6 +10,7 @@
 	import { Section } from '../../section';
 	import { Switch } from '../../switch';
 	import Text from '../../text/Text.svelte';
+	import { Tooltip } from '../../tooltip';
 	import Layout from '../Layout.svelte';
 	import type { LayoutNotification, LayoutTab } from '../types';
 
@@ -309,6 +310,40 @@
 							}}
 							width="130px"
 						/>
+
+						<Tooltip
+							onshow={(value) => console.log('Tooltip shown:', value)}
+							onclose={(value) => console.log('Tooltip closed:', value)}
+						>
+							{#snippet target()}
+								<button>Hover me</button>
+							{/snippet}
+
+							{#snippet tooltip()}
+								<div>Custom tooltip content here!</div>
+							{/snippet}
+						</Tooltip>
+
+						<Tooltip
+							onshow={(value) => console.log('Tooltip shown:', value)}
+							onclose={(value) => console.log('Tooltip closed:', value)}
+							listener="click"
+							listenerout="click"
+							stopPropagation={false}
+						>
+							{#snippet target()}
+								<button>Click me</button>
+							{/snippet}
+
+							{#snippet tooltip()}
+								<div class="click-tests">
+									<Text link onclick={() => console.log('Tooltip clicked')}>Click me</Text>
+									<Text link onclick={() => console.log('Tooltip another click')}
+										>Another click me</Text
+									>
+								</div>
+							{/snippet}
+						</Tooltip>
 					</div>
 					<Section clickable disabled>
 						<Text fontSize="md" fontWeight="normal">Clickable disabled</Text>
@@ -343,6 +378,12 @@
 </div>
 
 <style>
+	.click-tests {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
 	/* Main container layout */
 	.example-container {
 		display: flex;

package/dist/ui/components/section/Section.svelte

@@ -121,7 +121,7 @@
 	let ariaDisabled = $derived(clickable ? disabled : undefined);
 
 	// Determine tooltip configuration
-	let shouldShowTooltip = $derived(!!tooltip?.message || !!tooltip?.tooltipContent);
+	let shouldShowTooltip = $derived(!!tooltip?.message || !!tooltip?.tooltip);
 	let shouldShowDisabledTooltip = $derived(!!disabledMessage);
 	let hasAnyTooltip = $derived(shouldShowTooltip || shouldShowDisabledTooltip);
 
@@ -187,13 +187,14 @@
 			message={defaultDisabledMessage}
 			width={disabledTooltipWidth}
 			class="not-allowed"
+			stopPropagation={false}
 		>
 			{#snippet target()}
 				{@render sectionContent()}
 			{/snippet}
 		</Tooltip>
 	{:else if shouldShowTooltip}
-		<Tooltip {...tooltip}>
+		<Tooltip {...tooltip} stopPropagation={false}>
 			{#snippet target()}
 				{@render sectionContent()}
 			{/snippet}

package/dist/ui/components/text/Text.stories.svelte

@@ -227,7 +227,8 @@
 			active: true,
 			title: 'Remove',
 			subtitle: 'Alt + click',
-			description: 'This will remove the current selection.'
+			description: 'This will remove the current selection.',
+			onclick: () => console.log('Popup action clicked')
 		}
 	}}
 />

package/dist/ui/components/text/Text.svelte

@@ -282,7 +282,7 @@
 	let shouldShowTooltip = $derived(
 		!!tooltip &&
 			Object.keys(tooltip).length > 0 &&
-			(tooltip.message || tooltip.tooltipContent) &&
+			(tooltip.message || tooltip.tooltip) &&
 			!disabled &&
 			(isPopupHidden || !hasPopup)
 	);
@@ -550,6 +550,7 @@
 				bind:hidden={isPopupHidden}
 				listener="click"
 				listenerout="click"
+				stopPropagation={false}
 			>
 				{#snippet target()}
 					<span class="dropdown-label item {popupConfig.active ? 'active' : ''}">
@@ -784,7 +785,7 @@
 						{/if}
 					</span>
 				{/snippet}
-				{#snippet tooltipContent()}
+				{#snippet tooltip()}
 					<div
 						class="popup-wrapper"
 						style={!popupConfig.active ? 'display:none' : ''}

package/dist/ui/components/tooltip/TestTooltipWrapper.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Placement } from '@floating-ui/dom';
+
+	import Tooltip from './Tooltip.svelte';
+
+	interface Props {
+		message?: string;
+		hidden?: boolean;
+		disabled?: boolean;
+		listener?: 'click' | 'hover';
+		listenerout?: 'click' | 'hover';
+		placement?: Placement;
+		bgColor?: string;
+		class?: string;
+		onshow?: (event: boolean) => void;
+		onclose?: (event: boolean) => void;
+	}
+
+	let {
+		message = '',
+		hidden = false,
+		disabled = false,
+		listener = 'hover',
+		listenerout = 'hover',
+		placement = 'right',
+		bgColor,
+		class: className,
+		onshow,
+		onclose
+	}: Props = $props();
+</script>
+
+<Tooltip
+	{message}
+	{hidden}
+	{disabled}
+	{listener}
+	{listenerout}
+	{placement}
+	{bgColor}
+	class={className}
+	{onshow}
+	{onclose}
+>
+	{#snippet target()}
+		<button>Hover me</button>
+	{/snippet}
+</Tooltip>

package/dist/ui/components/tooltip/TestTooltipWrapper.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Placement } from '@floating-ui/dom';
+interface Props {
+    message?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    listener?: 'click' | 'hover';
+    listenerout?: 'click' | 'hover';
+    placement?: Placement;
+    bgColor?: string;
+    class?: string;
+    onshow?: (event: boolean) => void;
+    onclose?: (event: boolean) => void;
+}
+declare const TestTooltipWrapper: import("svelte").Component<Props, {}, "">;
+type TestTooltipWrapper = ReturnType<typeof TestTooltipWrapper>;
+export default TestTooltipWrapper;

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -8,23 +8,53 @@
 		type Placement,
 		shift
 	} from '@floating-ui/dom';
-	import { tick } from 'svelte';
+	import { type Component, onDestroy, onMount, type Snippet, tick } from 'svelte';
+	import { writable } from 'svelte/store';
 	import { v4 as uuidv4 } from 'uuid';
 
-	import { cleanupTooltipMessage } from '../../../utils/index.js';
-
-	import type { TooltipEvents, TooltipInstance, TooltipProps } from './types.js';
-
-	type Props = TooltipProps;
+	import { TooltipInfoCircleFilled } from '../../icons';
+	import ToolTipInfoCircleIcon from '../../icons/ToolTipInfoCircleIcon.svelte';
+	import { cleanupTooltipMessage } from '../../../utils';
+
+	import Text from '../text/Text.svelte';
+
+	const activeTooltips = writable<string[]>([]);
+
+	interface Props {
+		message?: string;
+		listener?: 'click' | 'hover';
+		listenerout?: 'click' | 'hover';
+		placement?: Placement;
+		position?: string;
+		showArrow?: boolean;
+		offsetVal?: number;
+		hidden?: boolean;
+		disabled?: boolean;
+		tooltipIcon?: Component | null;
+		tooltipIconColor?: string;
+		width?: string;
+		padding?: string;
+		raw?: boolean;
+		isActive?: boolean;
+		fallbackPlacements?: Placement[];
+		stopPropagation?: boolean;
+		fontColor?: string;
+		bgColor?: string;
+		class?: string;
+		/** Target element snippet */
+		target?: Snippet;
+		/** Tooltip content snippet */
+		tooltip?: Snippet;
+		onshow?: (event: boolean) => void;
+		onclose?: (event: boolean) => void;
+	}
 
 	let {
-		bgColor = 'var(--background3)',
 		message = '',
 		listener = 'hover',
 		listenerout = 'hover',
 		placement = 'right',
 		position = 'absolute',
-		class: classNames = '',
 		showArrow = true,
 		offsetVal = 10,
 		hidden = $bindable(false),
@@ -38,51 +68,30 @@
 		fallbackPlacements = [],
 		stopPropagation = true,
 		fontColor = 'var(--text2)',
+		bgColor = '',
+		class: className = '',
 		target,
-		tooltipContent,
-		targetText
+		tooltip,
+		onshow,
+		onclose
 	}: Props = $props();
 
-	// Generate appropriate target text based on trigger if not provided
-	let defaultTargetText = $derived(
-		targetText ||
-			(listener === 'click' && listenerout === 'click'
-				? 'Click me!'
-				: listener === 'click' && listenerout === 'hover'
-					? 'Click to show'
-					: listener === 'hover' && listenerout === 'click'
-						? 'Hover to show'
-						: 'Hover me!')
-	);
-
-	// State management with runes
-	let tooltipInstance: TooltipInstance | null = $state(null);
-	let targetElement: HTMLDivElement = $state()!;
-	let tooltipElement: HTMLDivElement = $state()!;
-	let arrowElement: HTMLDivElement = $state()!;
-	let observer: MutationObserver | null = $state(null);
-
-	// Generate unique ID for this tooltip instance
-	const tooltipId = $derived(`tooltip-${uuidv4()}`);
-
-	// Format message with cleanup utility
-	let formattedMessage = $derived(cleanupTooltipMessage(message));
+	type TooltipInstance = {
+		toggle: HTMLElement;
+		tooltip: HTMLElement;
+		arrowElement?: HTMLElement;
+		cleanup: () => void;
+		showTooltip: () => void;
+		hideTooltip: () => void;
+	};
 
-	// Tooltip visibility state
-	let isTooltipVisible = $derived(tooltipElement ? tooltipElement.style.display === 'flex' : false);
-
-	// Global store for tracking active tooltips
-	let activeTooltips: string[] = $state([]);
-
-	// Event dispatcher
-	function dispatchEvent(eventType: keyof TooltipEvents, detail: boolean) {
-		const event = new CustomEvent(eventType, {
-			detail,
-			bubbles: true,
-			cancelable: true
-		});
-		targetElement?.dispatchEvent(event);
-	}
+	let tooltipInstance: TooltipInstance | null = $state(null);
+	let targetElement: HTMLDivElement | undefined = $state();
+	let tooltipElement: HTMLDivElement | undefined = $state();
+	let arrowElement: HTMLDivElement | undefined = $state();
+	let observer: MutationObserver | null = null;
+	let documentClickListener: ((event: MouseEvent) => void) | null = null;
+	const tooltipId = `tooltip-${uuidv4()}`;
 
 	/**
 	 * Dismisses other tooltips based on trigger compatibility.
@@ -92,217 +101,197 @@
 	 * - hover tooltips should NOT dismiss click tooltips (they're "sticky")
 	 * - click tooltips CAN dismiss hover tooltips (higher priority)
 	 */
-	function dismissOtherTooltips() {
+	const dismissOtherTooltips = () => {
 		const currentTriggerType = listener === 'click' && listenerout === 'click' ? 'click' : 'hover';
 
-		document.querySelectorAll<HTMLDivElement>('.tooltip[role="tooltip"]').forEach((item) => {
-			if (item.id !== tooltipId) {
-				const existingTriggerType = item.getAttribute('data-trigger-type');
+		activeTooltips.update(() => {
+			document.querySelectorAll<HTMLDivElement>('.tooltip[role="tooltip"]').forEach((item) => {
+				if (item.id !== tooltipId) {
+					const existingTriggerType = item.getAttribute('data-trigger-type');
 
-				const shouldDismiss =
-					currentTriggerType === 'click' ||
-					(currentTriggerType === 'hover' && existingTriggerType === 'hover');
+					const shouldDismiss =
+						currentTriggerType === 'click' ||
+						(currentTriggerType === 'hover' && existingTriggerType === 'hover'); // Hover only dismisses other hover
 
-				if (shouldDismiss) {
-					item.style.display = 'none';
-					item.setAttribute('aria-hidden', 'true');
+					if (shouldDismiss) {
+						item.style.display = 'none';
+						item.setAttribute('aria-hidden', 'true');
+					}
 				}
-			}
+			});
+
+			return [tooltipId];
 		});
+	};
 
-		activeTooltips = [tooltipId];
-	}
+	/**
+	 * Inits the tooltip.
+	 */
+	const initTooltip = async (): Promise<TooltipInstance | null> => {
+		if (!tooltipElement || (showArrow && !arrowElement) || !targetElement) return null;
+		return setupTooltip(targetElement, tooltipElement, arrowElement);
+	};
 
 	/**
-	 * Sets up the tooltip with floating-ui positioning
+	 * Sets up the tooltip.
+	 * @param toggle
+	 * @param tooltip
+	 * @param arrowElement
 	 */
-	function setupTooltip(
+	const setupTooltip = (
 		toggle: HTMLElement,
-		tooltipEl: HTMLElement,
-		arrowEl?: HTMLElement
-	): TooltipInstance {
+		tooltip: HTMLElement,
+		arrowElement?: HTMLElement
+	): TooltipInstance => {
 		/**
-		 * Updates the tooltip position using floating-ui
+		 * Updates the tooltip position.
 		 */
 		const update = () => {
-			computePosition(toggle, tooltipEl, {
+			computePosition(toggle, tooltip, {
 				placement: placement,
 				middleware: [
 					offset(offsetVal),
 					flip(
 						fallbackPlacements?.length > 0
-							? { fallbackPlacements }
+							? {
+									fallbackPlacements
+								}
 							: {
 									fallbackAxisSideDirection: 'start',
 									fallbackStrategy: 'bestFit'
 								}
 					),
 					shift({ padding: 5 }),
-					showArrow && arrowEl ? arrow({ element: arrowEl }) : undefined
+					showArrow && arrowElement ? arrow({ element: arrowElement }) : undefined
 				].filter(Boolean)
-			}).then(({ x, y, placement: finalPlacement, middlewareData }) => {
-				// Position tooltip
-				Object.assign(tooltipEl.style, {
+			}).then(({ x, y, placement, middlewareData }) => {
+				Object.assign(tooltip.style, {
 					left: `${x}px`,
 					top: `${y}px`
 				});
 
-				// Position arrow using floating-ui's default behavior
-				if (showArrow && arrowEl && middlewareData?.arrow) {
-					const { x: arrowX, y: arrowY } = middlewareData.arrow;
-					const side = finalPlacement.split('-')[0];
+				// Accessing the data
+				const staticSide = {
+					top: 'bottom',
+					right: 'left',
+					bottom: 'top',
+					left: 'right'
+				}[placement.split('-')[0]];
 
-					const staticSide = {
-						top: 'bottom',
-						right: 'left',
-						bottom: 'top',
-						left: 'right'
-					}[side];
+				if (showArrow && arrowElement) {
+					if (!middlewareData?.arrow) return;
+					const { x: arrowX, y: arrowY } = middlewareData.arrow;
 
-					Object.assign(arrowEl.style, {
+					Object.assign(arrowElement.style, {
 						left: arrowX != null ? `${arrowX}px` : '',
 						top: arrowY != null ? `${arrowY}px` : '',
 						right: '',
 						bottom: '',
-						[staticSide as string]: '-4px'
+						[`${staticSide}`]: '-4px'
 					});
 				}
 			});
 		};
 
 		/**
-		 * Shows the tooltip
+		 * Shows the tooltip.
 		 */
 		const showTooltip = () => {
-			if (disabled) return;
+			if (disabled || !tooltipElement) return;
 
 			dismissOtherTooltips();
 
-			tooltipEl.style.display = 'flex';
-			tooltipEl.setAttribute('aria-hidden', 'false');
+			tooltipElement.style.display = 'flex';
+			tooltipElement.setAttribute('aria-hidden', 'false');
 
 			// Set trigger type for dismissal logic
 			const triggerType = listener === 'click' && listenerout === 'click' ? 'click' : 'hover';
-			tooltipEl.setAttribute('data-trigger-type', triggerType);
+			tooltipElement.setAttribute('data-trigger-type', triggerType);
 
 			isActive = true;
-			hidden = false;
 
-			if (!activeTooltips.includes(tooltipId)) {
-				activeTooltips = [...activeTooltips.filter((id) => id !== tooltipId), tooltipId];
-			}
+			activeTooltips.update((ids) => [...ids.filter((id) => id !== tooltipId), tooltipId]);
 
 			update();
-			dispatchEvent('show', true);
+			onshow?.(true);
 		};
 
 		/**
-		 * Hides the tooltip
+		 * Hides the tooltip.
 		 */
 		const hideTooltip = () => {
-			// Hide immediately in test environment
-			const isTestEnv =
-				(typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') ||
-				(typeof globalThis !== 'undefined' && '__vitest__' in globalThis);
-			const delay = isTestEnv ? 0 : 100;
-
 			setTimeout(() => {
-				tooltipEl.style.display = 'none';
-				tooltipEl.setAttribute('aria-hidden', 'true');
-				tooltipEl.removeAttribute('data-trigger-type');
+				if (!tooltipElement) return;
+
+				tooltipElement.style.display = 'none';
+				tooltipElement.setAttribute('aria-hidden', 'true');
+				tooltipElement.removeAttribute('data-trigger-type');
 				isActive = false;
-				hidden = true;
-				activeTooltips = activeTooltips.filter((id) => id !== tooltipId);
 
-				dispatchEvent('close', true);
-			}, delay);
+				activeTooltips.update((ids) => ids.filter((id) => id !== tooltipId));
+
+				onclose?.(true);
+			}, 50);
 		};
 
-		// Set up event listeners based on trigger configuration
-		let eventOptions: Array<[string, () => void]> = [];
+		let opts;
 
 		if (listener === 'click' && listenerout === 'click') {
-			eventOptions = [['click', showTooltip]];
-
-			// Global click handler for dismissal
-			const handleGlobalClick = (event: MouseEvent) => {
-				if (!tooltipEl.contains(event.target as Node) && !toggle.contains(event.target as Node)) {
+			opts = [['click', showTooltip]];
+
+			// Store reference to the click handler for cleanup
+			documentClickListener = (event: MouseEvent) => {
+				if (
+					tooltipElement &&
+					toggle &&
+					!tooltipElement.contains(event.target as Node) &&
+					!toggle.contains(event.target as Node)
+				) {
 					hideTooltip();
 				}
 			};
 
-			document.addEventListener('click', handleGlobalClick);
-
-			// Return cleanup function that removes global listener
-			const originalCleanup = autoUpdate(toggle, tooltipEl, update);
-			const cleanup = () => {
-				originalCleanup();
-				document.removeEventListener('click', handleGlobalClick);
-			};
-
-			// Add event listeners to toggle element
-			eventOptions.forEach(([event, handler]) => {
-				toggle.addEventListener(event, (evt) => {
-					if (stopPropagation) {
-						evt.stopPropagation();
-						evt.preventDefault();
-					}
-					handler();
-				});
-			});
-
-			return {
-				toggle,
-				tooltip: tooltipEl,
-				arrowElement: arrowEl,
-				cleanup,
-				showTooltip,
-				hideTooltip
-			};
+			document.addEventListener('click', documentClickListener);
 		} else {
-			eventOptions = [
+			opts = [
 				listener === 'click' ? ['click', showTooltip] : undefined,
 				listener === 'hover' ? ['mouseenter', showTooltip] : undefined,
 				listener === 'hover' ? ['mouseleave', hideTooltip] : undefined,
 				listener === 'hover' ? ['focus', showTooltip] : undefined,
 				['blur', hideTooltip]
-			].filter(Boolean) as Array<[string, () => void]>;
+			];
 		}
 
-		// Add event listeners
-		eventOptions.forEach(([event, handler]) => {
+		type EventOption = [string, () => void];
+		const options: EventOption[] = opts.filter(Boolean) as EventOption[];
+
+		options.forEach(([event, listener]) => {
 			toggle.addEventListener(event, (evt) => {
 				if (stopPropagation) {
 					evt.stopPropagation();
 					evt.preventDefault();
 				}
-				handler();
+				listener();
 			});
 		});
 
-		const cleanup = autoUpdate(toggle, tooltipEl, update);
-
-		return { toggle, tooltip: tooltipEl, arrowElement: arrowEl, cleanup, showTooltip, hideTooltip };
-	}
-
-	/**
-	 * Initializes the tooltip instance
-	 */
-	async function initTooltip(): Promise<TooltipInstance | null> {
-		if (!tooltipElement || (showArrow && !arrowElement) || !targetElement) return null;
-		return setupTooltip(targetElement, tooltipElement, arrowElement);
-	}
+		const cleanup = () => {
+			if (tooltipElement) {
+				autoUpdate(toggle, tooltipElement, update)();
+			}
+			if (documentClickListener) {
+				document.removeEventListener('click', documentClickListener);
+				documentClickListener = null;
+			}
+		};
 
-	// Public API methods
-	export function show() {
-		tooltipInstance?.showTooltip();
-	}
+		return { toggle, tooltip: tooltipElement!, arrowElement, cleanup, showTooltip, hideTooltip };
+	};
 
-	export function hide() {
-		tooltipInstance?.hideTooltip();
-	}
+	export const show = () => tooltipInstance?.showTooltip();
+	export const hide = () => tooltipInstance?.hideTooltip();
 
-	// Effect to handle hidden prop changes
+	// Svelte 5 effect for hidden prop
 	$effect(() => {
 		if (hidden) {
 			setTimeout(() => {
@@ -316,129 +305,107 @@
 		}
 	});
 
-	$effect(() => {
-		if (tooltipElement) {
-			const handleTooltipInteraction = (evt: Event) => {
-				evt.stopPropagation();
-			};
+	let isClickTarget = $state(listener === 'click' && listenerout === 'click');
 
-			tooltipElement.addEventListener('click', handleTooltipInteraction, true);
-			tooltipElement.addEventListener('mousedown', handleTooltipInteraction, true);
-			tooltipElement.addEventListener('mouseup', handleTooltipInteraction, true);
+	const formattedMessage = $derived(cleanupTooltipMessage(message));
 
-			return () => {
-				tooltipElement.removeEventListener('click', handleTooltipInteraction, true);
-				tooltipElement.removeEventListener('mousedown', handleTooltipInteraction, true);
-				tooltipElement.removeEventListener('mouseup', handleTooltipInteraction, true);
-			};
-		}
+	onMount(async () => {
+		await tick();
+		tooltipInstance = await initTooltip();
 	});
 
-	// Initialize tooltip when component mounts
-	$effect(() => {
-		if (targetElement && tooltipElement) {
-			tick().then(async () => {
-				tooltipInstance = await initTooltip();
-
-				if (tooltipElement) {
-					observer = new MutationObserver((mutations) => {
-						mutations.forEach((mutation) => {
-							if (mutation.type === 'attributes' && tooltipElement?.style) {
-								const isVisible = tooltipElement.style.display !== 'none';
-								dispatchEvent(isVisible ? 'show' : 'close', true);
-							}
-						});
-					});
+	onDestroy(() => {
+		// Disconnect observer first to prevent any new callbacks
+		if (observer) {
+			observer.disconnect();
+			observer = null;
+		}
 
-					observer.observe(tooltipElement, { attributes: true });
-				}
-			});
+		// Clean up document click listener
+		if (documentClickListener) {
+			document.removeEventListener('click', documentClickListener);
+			documentClickListener = null;
 		}
 
-		// Cleanup effect
-		return () => {
-			if (tooltipInstance) {
-				tooltipInstance.cleanup();
-				activeTooltips = activeTooltips.filter((id) => id !== tooltipId);
-			}
-			if (observer) {
-				observer.disconnect();
-				observer = null;
-			}
-		};
+		if (tooltipInstance) {
+			tooltipInstance.cleanup();
+			activeTooltips.update((ids) => ids.filter((id) => id !== tooltipId));
+			tooltipInstance = null;
+		}
 	});
 </script>
 
-<div class="target {classNames}" bind:this={targetElement} aria-describedby={tooltipId}>
+<div class="target" bind:this={targetElement} aria-describedby={tooltipId}>
 	{#if target}
 		{@render target()}
 	{:else}
-		<button
-			style="
-				padding: 4px 8px; 
-				background: #007bff; 
-				color: white; 
-				border: none; 
-				border-radius: 4px; 
-				cursor: pointer;
-			"
-		>
-			{defaultTargetText}
-		</button>
+		<!-- Default target for Demo only -->
+		<Text link label={isClickTarget ? 'Click me' : 'Hover me'} />
 	{/if}
 
 	<div
-		class="tooltip"
+		class="tooltip {className}"
 		bind:this={tooltipElement}
 		role="tooltip"
 		id={tooltipId}
-		aria-hidden={isTooltipVisible ? 'false' : 'true'}
-		style="position:{position}; width:{width}; padding:{padding}; background:{bgColor};"
+		style="position:{position}; width:{width}; padding:{padding}; {bgColor
+			? `background-color: ${bgColor};`
+			: ''}"
 	>
 		{#if tooltipIcon}
-			{@const IconComponent = tooltipIcon}
+			{@const Icon = tooltipIcon}
 			<div class="icon" style="color:{tooltipIconColor};">
-				<IconComponent />
+				<Icon />
 			</div>
 		{/if}
 
-		<div class="content-wrapper">
-			{#if tooltipContent}
-				{@render tooltipContent()}
-			{:else if message && raw}
-				<div class="message" style="color:{fontColor};">
-					{@html message}
-				</div>
-			{:else if message}
-				<div class="message">
-					<span>{formattedMessage}</span>
-				</div>
-			{/if}
-		</div>
+		{#if tooltip}
+			{@render tooltip()}
+		{:else if message && raw}
+			<div class="message" style="color:{fontColor};">
+				{@html message}
+			</div>
+		{:else if message}
+			<div class="message">
+				<Text label={formattedMessage} fontSize="11px" fontWeight="500" {fontColor} />
+			</div>
+		{/if}
 
 		{#if showArrow}
-			<div class="arrow" bind:this={arrowElement} style="background: {bgColor};"></div>
+			<div
+				class="arrow"
+				id="arrow_{tooltipId}"
+				bind:this={arrowElement}
+				style={bgColor ? `background-color: ${bgColor};` : ''}
+			></div>
 		{/if}
 	</div>
 </div>
 
 <style>
+	.message {
+		background: var(--background3, #383838);
+		text-wrap: normal;
+		white-space: normal;
+		color: var(--text2, #b9b9b9);
+		font-weight: 500;
+		font-size: 11px;
+	}
 	.tooltip {
 		display: none;
 		top: 0;
 		left: 0;
-		border-radius: 4px;
 		z-index: 99999999999;
-		border-radius: var(--border-radius, 4px);
-		background: var(--background3);
+		border-radius: 4px;
+		background: var(--background3, #383838);
 		box-shadow:
-			0 12px 24px 8px #0000004d,
-			0 8px 16px 4px #0000004d,
-			0 4px 8px 2px #0000,
-			0 2px 6px #00000014,
-			0 -0.5px 0.5px #0000 inset,
-			0 0.5px 0.5px #ffffff57 inset;
-		color: var(--text2);
+			0px 12px 24px 8px rgb(0 0 0 / 30%),
+			0px 8px 16px 4px rgb(0 0 0 / 30%),
+			0px 4px 8px 2px rgb(0 0 0 / 0%),
+			0px 2px 6px 0px rgba(0, 0, 0, 0.08),
+			0px -0.5px 0.5px 0px rgb(0 0 0 / 0%) inset,
+			0px 0.5px 0.5px 0px rgb(255 255 255 / 34%) inset;
+		color: var(--text2, #b9b9b9);
 		font-family: Inter;
 		line-height: 120%;
 		width: 150px;
@@ -448,38 +415,20 @@
 		align-items: start;
 		justify-content: start;
 	}
-
-	.content-wrapper {
-		flex: 1;
-		min-width: 0;
-		border-radius: var(--border-radius, 4px);
-		z-index: 3;
-		background: inherit;
-	}
-
-	.message {
-		text-wrap: normal;
-		white-space: normal;
-		color: var(--text2);
-		font-weight: 500;
-		font-size: 11px;
-	}
-
 	.arrow {
+		z-index: 1;
+		background: var(--background3, #383838);
 		position: absolute;
-		width: 10px;
-		height: 10px;
+		width: 8px;
+		height: 8px;
 		transform: rotate(45deg);
 	}
-
-	.target {
+	.target :global(div[slot='tooltip']) {
+		width: 100%;
+	}
+	.target :global(div[slot='target']) {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
-
-	.icon {
-		position: relative;
-		z-index: 1;
-	}
 </style>

package/dist/ui/components/tooltip/Tooltip.svelte.d.ts

@@ -1,7 +1,36 @@
-import type { TooltipProps } from './types.js';
-declare const Tooltip: import("svelte").Component<TooltipProps, {
-    show: () => void;
-    hide: () => void;
+import { type Placement } from '@floating-ui/dom';
+import { type Component, type Snippet } from 'svelte';
+interface Props {
+    message?: string;
+    listener?: 'click' | 'hover';
+    listenerout?: 'click' | 'hover';
+    placement?: Placement;
+    position?: string;
+    showArrow?: boolean;
+    offsetVal?: number;
+    hidden?: boolean;
+    disabled?: boolean;
+    tooltipIcon?: Component | null;
+    tooltipIconColor?: string;
+    width?: string;
+    padding?: string;
+    raw?: boolean;
+    isActive?: boolean;
+    fallbackPlacements?: Placement[];
+    stopPropagation?: boolean;
+    fontColor?: string;
+    bgColor?: string;
+    class?: string;
+    /** Target element snippet */
+    target?: Snippet;
+    /** Tooltip content snippet */
+    tooltip?: Snippet;
+    onshow?: (event: boolean) => void;
+    onclose?: (event: boolean) => void;
+}
+declare const Tooltip: Component<Props, {
+    show: () => void | undefined;
+    hide: () => void | undefined;
 }, "hidden" | "isActive">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;

package/dist/ui/components/tooltip/types.d.ts

@@ -81,7 +81,7 @@ export interface TooltipProps {
     /**
      * Tooltip content snippet (custom tooltip content)
      */
-    tooltipContent?: Snippet;
+    tooltip?: Snippet;
     /**
      * Default target text when no target snippet is provided (for Storybook compatibility)
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {