@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/ui/Tooltip.svelte

@@ -2,7 +2,23 @@
 	import type { Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
 
-	interface Props {
+	export type TooltipLocation =
+		| 'top'
+		| 'right'
+		| 'bottom'
+		| 'left'
+		| 'top-start'
+		| 'top-end'
+		| 'right-start'
+		| 'right-end'
+		| 'bottom-start'
+		| 'bottom-end'
+		| 'left-start'
+		| 'left-end';
+
+	type Side = 'top' | 'right' | 'bottom' | 'left';
+
+	export interface TooltipProps {
 		/** The element to attach the tooltip to */
 		children: Snippet;
 		/** Rich content using a Svelte snippet */
@@ -12,7 +28,7 @@
 		/** HTML content (use with caution - sanitize user input) */
 		html?: string;
 		/** Preferred tooltip position */
-		location?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+		location?: TooltipLocation;
 		/** Maximum width of tooltip */
 		maxWidth?: string;
 		/** Offset distance from target element (px) */
@@ -39,33 +55,50 @@
 		delay = 0,
 		onOpen,
 		disabled = false
-	}: Props = $props();
+	}: TooltipProps = $props();
+
+	/** Half the arrow's base and its full height — the triangle is 2x wide, 1x tall. */
+	const ARROW_SIZE = 6;
+	/** Matches .tooltip-v2-content border-radius so the arrow never sits on a rounded corner. */
+	const CORNER_RADIUS = 6;
+	/** Minimum gap between the tooltip and the viewport edge. */
+	const VIEWPORT_PADDING = 5;
+
+	const OPPOSITE_SIDE: Record<Side, Side> = {
+		top: 'bottom',
+		bottom: 'top',
+		left: 'right',
+		right: 'left'
+	};
 
 	// State
 	let open = $state(false);
+	/** False until the tooltip has been measured and placed; it stays hidden until then. */
+	let positioned = $state(false);
 	let referenceElement: HTMLElement | null = $state(null);
 	let tooltipElement: HTMLElement | null = $state(null);
-	let arrowElement: HTMLElement | null = $state(null);
 	let timeoutId: number | null = null;
+	let rafId: number | null = null;
+	/** Ancestor the tooltip's left/top actually resolve against, if not the viewport. */
+	let fixedContainer: HTMLElement | null = null;
 
 	// Position state
-	let tooltipStyle = $state('');
+	let tooltipStyle = $state('left: 0px; top: 0px;');
 	let arrowStyle = $state('');
-	let actualPlacement = $state<'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'>('top');
-
-	// Sync actualPlacement with location prop
-	$effect(() => {
-		actualPlacement = location;
-	});
+	let actualPlacement = $state<TooltipLocation>('top');
 
 	// Check if tooltip has any content
 	const hasContent = $derived(!!(text || html || tooltipContent));
+	const visible = $derived(open && hasContent && !disabled);
 
 	function handleMouseEnter() {
 		if (disabled || !hasContent) return;
 
+		cancelPending();
+
 		if (delay > 0) {
 			timeoutId = window.setTimeout(() => {
+				timeoutId = null;
 				showTooltip();
 			}, delay);
 		} else {
@@ -74,65 +107,175 @@
 	}
 
 	function handleMouseLeave() {
-		if (timeoutId) {
+		cancelPending();
+		hideTooltip();
+	}
+
+	function cancelPending() {
+		if (timeoutId !== null) {
 			clearTimeout(timeoutId);
 			timeoutId = null;
 		}
-		hideTooltip();
 	}
 
 	function showTooltip() {
+		if (open) return;
+
+		// The floating element is remounted on every open, so it starts unmeasured.
+		// Keeping it hidden until the positioning effect has run stops the fade-in
+		// from playing at the coordinates left over from the previous open.
+		positioned = false;
 		open = true;
 		onOpen?.(true);
-
-		// Position tooltip after it's rendered
-		// Use multiple RAF calls and verify dimensions to ensure layout is complete
-		requestAnimationFrame(() => {
-			requestAnimationFrame(() => {
-				if (referenceElement && tooltipElement) {
-					positionTooltip();
-
-					// Verify and reposition if dimensions changed
-					requestAnimationFrame(() => {
-						if (tooltipElement) {
-							const rect = tooltipElement.getBoundingClientRect();
-							if (rect.width > 0 && rect.height > 0) {
-								positionTooltip();
-							}
-						}
-					});
-				}
-			});
-		});
 	}
 
 	function hideTooltip() {
+		if (!open) return;
+
 		open = false;
 		onOpen?.(false);
 	}
 
+	function clamp(value: number, min: number, max: number): number {
+		return Math.max(min, Math.min(value, max));
+	}
+
+	/**
+	 * A transform, filter, perspective, containment or container-type on an ancestor
+	 * makes that ancestor the containing block for `position: fixed` descendants —
+	 * left/top stop meaning "from the viewport" while getBoundingClientRect() keeps
+	 * reporting viewport coordinates. Dialog hits this: its open animation uses a
+	 * `forwards` fill, which leaves `transform: translateY(0)` applied while open.
+	 */
+	function findFixedContainingBlock(element: HTMLElement): HTMLElement | null {
+		let node = element.parentElement;
+
+		while (node) {
+			const style = getComputedStyle(node);
+			// Newer properties go through getPropertyValue so an older DOM lib (or a
+			// browser without support) reports '' instead of failing to compile.
+			const containerType = style.getPropertyValue('container-type');
+			const backdropFilter =
+				style.getPropertyValue('backdrop-filter') ||
+				style.getPropertyValue('-webkit-backdrop-filter');
+
+			if (
+				style.transform !== 'none' ||
+				style.perspective !== 'none' ||
+				style.filter !== 'none' ||
+				(backdropFilter !== '' && backdropFilter !== 'none') ||
+				(containerType !== '' && containerType !== 'normal') ||
+				/\b(paint|layout|strict|content)\b/.test(style.contain) ||
+				/\b(transform|perspective|filter)\b/.test(style.willChange)
+			) {
+				return node;
+			}
+
+			node = node.parentElement;
+		}
+
+		return null;
+	}
+
+	/** Viewport coordinates of the origin that left/top are measured from. */
+	function containingBlockOrigin(): { x: number; y: number } {
+		if (!fixedContainer) return { x: 0, y: 0 };
+
+		const rect = fixedContainer.getBoundingClientRect();
+		const style = getComputedStyle(fixedContainer);
+
+		// Fixed descendants resolve against the padding box, so drop the border.
+		return {
+			x: rect.left + (parseFloat(style.borderLeftWidth) || 0),
+			y: rect.top + (parseFloat(style.borderTopWidth) || 0)
+		};
+	}
+
 	function positionTooltip() {
+		// Read the geometry props before any early return, so that calling this from
+		// an effect always registers them as dependencies and a prop changed while
+		// the tooltip is open re-anchors it.
+		const preferred = location;
+		const offset = offsetDistance + (showArrow ? ARROW_SIZE : 0);
+
 		if (!referenceElement || !tooltipElement) return;
 
 		const refRect = referenceElement.getBoundingClientRect();
 		const tooltipRect = tooltipElement.getBoundingClientRect();
-		const arrowSize = showArrow ? 12 : 0;
-		const offset = offsetDistance + arrowSize;
 
-		let position = calculatePosition(location, refRect, tooltipRect, offset);
+		// A zero-sized box means layout has not happened yet; anchoring to it would
+		// pin the tooltip to dimensions that are about to change.
+		if (tooltipRect.width === 0 || tooltipRect.height === 0) return;
+
+		const { position, placement } = resolvePlacement(preferred, refRect, tooltipRect, offset);
 
-		// Check if tooltip would overflow viewport and flip if needed
-		const flippedPosition = checkAndFlipPosition(position, tooltipRect, location, refRect, offset);
-		position = flippedPosition.position;
-		actualPlacement = flippedPosition.placement as typeof actualPlacement;
+		// `position` is in viewport space, which is what the arrow maths below wants
+		// too. Only the style needs translating into the containing block's space.
+		const origin = containingBlockOrigin();
+
+		actualPlacement = placement;
+		tooltipStyle = `left: ${Math.round(position.left - origin.x)}px; top: ${Math.round(position.top - origin.y)}px;`;
+		arrowStyle = showArrow ? calculateArrowPosition(placement, refRect, position, tooltipRect) : '';
+		positioned = true;
+	}
 
-		// Apply position
-		tooltipStyle = `left: ${position.left}px; top: ${position.top}px;`;
+	/** Coalesce bursts of scroll/resize events into one reposition per frame. */
+	function schedulePosition() {
+		if (rafId !== null) return;
 
-		// Position arrow
-		if (showArrow && arrowElement) {
-			arrowStyle = calculateArrowPosition(actualPlacement, refRect, position);
+		rafId = requestAnimationFrame(() => {
+			rafId = null;
+			positionTooltip();
+		});
+	}
+
+	function resolvePlacement(
+		preferred: TooltipLocation,
+		refRect: DOMRect,
+		tooltipRect: DOMRect,
+		offset: number
+	): { position: { left: number; top: number }; placement: TooltipLocation } {
+		// clientWidth/Height exclude the scrollbars, which window.innerWidth includes.
+		const viewportWidth = document.documentElement.clientWidth;
+		const viewportHeight = document.documentElement.clientHeight;
+
+		const [side, alignment] = preferred.split('-') as [Side, string | undefined];
+
+		const space = {
+			top: refRect.top - VIEWPORT_PADDING,
+			bottom: viewportHeight - refRect.bottom - VIEWPORT_PADDING,
+			left: refRect.left - VIEWPORT_PADDING,
+			right: viewportWidth - refRect.right - VIEWPORT_PADDING
+		};
+		const required =
+			side === 'top' || side === 'bottom'
+				? tooltipRect.height + offset
+				: tooltipRect.width + offset;
+
+		// Flip only when the preferred side cannot fit *and* the opposite side is
+		// roomier — flipping into an equally cramped side just moves the problem.
+		let chosen = side;
+		if (space[side] < required && space[OPPOSITE_SIDE[side]] > space[side]) {
+			chosen = OPPOSITE_SIDE[side];
 		}
+
+		const placement = (alignment ? `${chosen}-${alignment}` : chosen) as TooltipLocation;
+		const position = calculatePosition(placement, refRect, tooltipRect, offset);
+
+		// Shift back inside the viewport. The arrow is clamped separately so it keeps
+		// pointing at the trigger after the box slides away from it.
+		position.left = clamp(
+			position.left,
+			VIEWPORT_PADDING,
+			viewportWidth - tooltipRect.width - VIEWPORT_PADDING
+		);
+		position.top = clamp(
+			position.top,
+			VIEWPORT_PADDING,
+			viewportHeight - tooltipRect.height - VIEWPORT_PADDING
+		);
+
+		return { position, placement };
 	}
 
 	function calculatePosition(
@@ -179,174 +322,150 @@
 		return { left, top };
 	}
 
-	function checkAndFlipPosition(
-		position: { left: number; top: number },
-		tooltipRect: DOMRect,
-		placement: string,
-		refRect: DOMRect,
-		offset: number
-	): { position: { left: number; top: number }; placement: string } {
-		const viewportWidth = window.innerWidth;
-		const viewportHeight = window.innerHeight;
-		const padding = 5;
-
-		let newPosition = { ...position };
-		let newPlacement = placement;
-		const [side] = placement.split('-');
-
-		// Check vertical overflow
-		if (side === 'top' && position.top < padding) {
-			// Flip to bottom
-			newPlacement = placement.replace('top', 'bottom');
-			newPosition = calculatePosition(newPlacement, refRect, tooltipRect, offset);
-		} else if (side === 'bottom' && position.top + tooltipRect.height > viewportHeight - padding) {
-			// Flip to top
-			newPlacement = placement.replace('bottom', 'top');
-			newPosition = calculatePosition(newPlacement, refRect, tooltipRect, offset);
-		}
-
-		// Check horizontal overflow
-		if (side === 'left' && position.left < padding) {
-			// Flip to right
-			newPlacement = placement.replace('left', 'right');
-			newPosition = calculatePosition(newPlacement, refRect, tooltipRect, offset);
-		} else if (side === 'right' && position.left + tooltipRect.width > viewportWidth - padding) {
-			// Flip to left
-			newPlacement = placement.replace('right', 'left');
-			newPosition = calculatePosition(newPlacement, refRect, tooltipRect, offset);
-		}
-
-		// Shift within bounds if still overflowing
-		if (newPosition.left < padding) {
-			newPosition.left = padding;
-		} else if (newPosition.left + tooltipRect.width > viewportWidth - padding) {
-			newPosition.left = viewportWidth - tooltipRect.width - padding;
-		}
-
-		if (newPosition.top < padding) {
-			newPosition.top = padding;
-		} else if (newPosition.top + tooltipRect.height > viewportHeight - padding) {
-			newPosition.top = viewportHeight - tooltipRect.height - padding;
-		}
-
-		return { position: newPosition, placement: newPlacement };
-	}
-
 	function calculateArrowPosition(
-		placement: string,
+		placement: TooltipLocation,
 		refRect: DOMRect,
-		tooltipPos: { left: number; top: number }
+		tooltipPos: { left: number; top: number },
+		tooltipRect: DOMRect
 	): string {
 		const [side] = placement.split('-');
 
-		const refCenter = {
-			x: refRect.left + refRect.width / 2,
-			y: refRect.top + refRect.height / 2
-		};
+		const refCenterX = refRect.left + refRect.width / 2;
+		const refCenterY = refRect.top + refRect.height / 2;
 
-		const tooltipHeight = tooltipElement?.offsetHeight || 0;
-		const tooltipWidth = tooltipElement?.offsetWidth || 0;
+		// Aim at the trigger's centre, but never past the tooltip's rounded corners —
+		// an unclamped arrow floats off the box once the tooltip has been shifted.
+		const inset = CORNER_RADIUS + ARROW_SIZE;
+		const arrowX = clamp(refCenterX - tooltipPos.left, inset, tooltipRect.width - inset);
+		const arrowY = clamp(refCenterY - tooltipPos.top, inset, tooltipRect.height - inset);
 
-		// Calculate arrow center position relative to tooltip
-		const arrowX = refCenter.x - tooltipPos.left;
-		const arrowY = refCenter.y - tooltipPos.top;
+		const transparent = `${ARROW_SIZE}px solid transparent`;
+		const filled = `${ARROW_SIZE}px solid var(--tooltip-bg)`;
+		// Negative margin centres the triangle on the aim point; the 100% offsets sit
+		// it flush against the edge so it spans the whole gap to the trigger.
+		const centreX = `margin-left: ${-ARROW_SIZE}px;`;
+		const centreY = `margin-top: ${-ARROW_SIZE}px;`;
 
 		switch (side) {
 			case 'top':
-				// Arrow at bottom edge, pointing down
-				return `
-					left: ${arrowX}px;
-					top: ${tooltipHeight}px;
-					border-left: 12px solid transparent;
-					border-right: 12px solid transparent;
-					border-top: 12px solid var(--tooltip-bg);
-					transform: translateX(-50%) translateY(-50%);
-				`;
+				// Bottom edge, pointing down
+				return `left: ${Math.round(arrowX)}px; top: 100%; ${centreX} border-left: ${transparent}; border-right: ${transparent}; border-top: ${filled};`;
 
 			case 'bottom':
-				// Arrow at top edge, pointing up
-				return `
-					left: ${arrowX}px;
-					top: 0px;
-					border-left: 12px solid transparent;
-					border-right: 12px solid transparent;
-					border-bottom: 12px solid var(--tooltip-bg);
-					transform: translateX(-50%) translateY(-50%);
-				`;
+				// Top edge, pointing up
+				return `left: ${Math.round(arrowX)}px; bottom: 100%; ${centreX} border-left: ${transparent}; border-right: ${transparent}; border-bottom: ${filled};`;
 
 			case 'left':
-				// Arrow at right edge, pointing left
-				return `
-					left: ${tooltipWidth}px;
-					top: ${arrowY}px;
-					border-top: 12px solid transparent;
-					border-bottom: 12px solid transparent;
-					border-left: 12px solid var(--tooltip-bg);
-					transform: translateX(-50%) translateY(-50%);
-				`;
+				// Right edge, pointing right at the trigger
+				return `top: ${Math.round(arrowY)}px; left: 100%; ${centreY} border-top: ${transparent}; border-bottom: ${transparent}; border-left: ${filled};`;
 
 			case 'right':
-				// Arrow at left edge, pointing right
-				return `
-					left: 0px;
-					top: ${arrowY}px;
-					border-top: 12px solid transparent;
-					border-bottom: 12px solid transparent;
-					border-right: 12px solid var(--tooltip-bg);
-					transform: translateX(-50%) translateY(-50%);
-				`;
+				// Left edge, pointing left at the trigger
+				return `top: ${Math.round(arrowY)}px; right: 100%; ${centreY} border-top: ${transparent}; border-bottom: ${transparent}; border-right: ${filled};`;
 
 			default:
 				return '';
 		}
 	}
 
-	function handleKeydown(event: KeyboardEvent) {
-		if (event.key === 'Escape' && open) {
+	// Keep the tooltip anchored for as long as it is on screen. Runs before paint,
+	// so the first frame is already in the right place.
+	$effect(() => {
+		if (!visible || !tooltipElement || !referenceElement) return;
+
+		const tooltip = tooltipElement;
+		const reference = referenceElement;
+
+		// Resolved once per open rather than per reposition — walking the ancestor
+		// chain with getComputedStyle is too costly to repeat on every scroll frame.
+		fixedContainer = findFixedContainingBlock(tooltip);
+
+		// Reads location/offsetDistance/showArrow, so this effect re-runs when they
+		// change. maxWidth is covered by the observer below: it resizes the box.
+		positionTooltip();
+
+		// Content that grows, shrinks or reflows after the fact — async data, images,
+		// a font swap, a reactive snippet — invalidates the measurements above.
+		const observer = new ResizeObserver(() => positionTooltip());
+		observer.observe(tooltip);
+		observer.observe(reference);
+		// A centred container (a dialog) moves the trigger when it resizes without
+		// resizing the trigger itself, so neither observer above would notice.
+		if (fixedContainer) observer.observe(fixedContainer);
+
+		// Capture phase so scrolling any ancestor container counts, not just the page.
+		window.addEventListener('scroll', schedulePosition, true);
+		window.addEventListener('resize', schedulePosition);
+
+		return () => {
+			observer.disconnect();
+			window.removeEventListener('scroll', schedulePosition, true);
+			window.removeEventListener('resize', schedulePosition);
+			fixedContainer = null;
+
+			if (rafId !== null) {
+				cancelAnimationFrame(rafId);
+				rafId = null;
+			}
+		};
+	});
+
+	$effect(() => {
+		if (!visible) return;
+
+		const onKeydown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				cancelPending();
+				hideTooltip();
+			}
+		};
+
+		window.addEventListener('keydown', onKeydown);
+		return () => window.removeEventListener('keydown', onKeydown);
+	});
+
+	// Losing the content or being disabled mid-hover has to close the tooltip, not
+	// just hide it, or onOpen would be left reporting an open tooltip.
+	$effect(() => {
+		if (open && (disabled || !hasContent)) {
+			cancelPending();
 			hideTooltip();
 		}
-	}
+	});
 
+	// Drop a pending delay timer if the component is destroyed mid-hover.
 	$effect(() => {
-		if (open) {
-			window.addEventListener('keydown', handleKeydown);
-			window.addEventListener('scroll', positionTooltip, true);
-			window.addEventListener('resize', positionTooltip);
-
-			return () => {
-				window.removeEventListener('keydown', handleKeydown);
-				window.removeEventListener('scroll', positionTooltip, true);
-				window.removeEventListener('resize', positionTooltip);
-			};
-		}
+		return () => cancelPending();
 	});
 </script>
 
 <div class="tooltip-v2-container">
-	<!-- Reference Element -->
+	<!-- Reference Element: a passive wrapper — the interactive element (e.g. button) is
+	     provided by children; focusin/focusout bubble up from it, unlike focus/blur -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		bind:this={referenceElement}
 		class="tooltip-v2-trigger"
 		onmouseenter={handleMouseEnter}
 		onmouseleave={handleMouseLeave}
-		onfocus={handleMouseEnter}
-		onblur={handleMouseLeave}
-		role="button"
-		tabindex="0"
+		onfocusin={handleMouseEnter}
+		onfocusout={handleMouseLeave}
 	>
 		{@render children()}
 	</div>
 
 	<!-- Floating Tooltip -->
-	{#if open && hasContent && !disabled}
+	{#if visible}
 		<div
 			bind:this={tooltipElement}
 			class="tooltip-v2-floating"
-			style={tooltipStyle}
+			class:is-positioned={positioned}
+			style="{tooltipStyle} max-width: {maxWidth};"
+			data-placement={actualPlacement}
 			role="tooltip"
 			transition:fade={{ duration: 150 }}
 		>
-			<div class="tooltip-v2-content" style="max-width: {maxWidth}">
+			<div class="tooltip-v2-content">
 				{#if text}
 					<span>{text}</span>
 				{:else if html}
@@ -357,7 +476,7 @@
 			</div>
 
 			{#if showArrow}
-				<div bind:this={arrowElement} class="tooltip-v2-arrow" style={arrowStyle}></div>
+				<div class="tooltip-v2-arrow" style={arrowStyle}></div>
 			{/if}
 		</div>
 	{/if}
@@ -375,29 +494,42 @@
 
 	.tooltip-v2-floating {
 		position: fixed;
-		z-index: var(--pui-z-tooltip);
+		left: 0;
+		top: 0;
+		z-index: 9999;
 		pointer-events: none;
-		--tooltip-bg: var(--pui-color-gray-200);
-		--tooltip-text: var(--pui-color-gray-800);
+		/* Size the box independently of where it sits. With auto width the available
+		   space is viewportWidth - left, so measuring and then moving the tooltip
+		   would change the size it was measured at and retrigger the observer. */
+		width: max-content;
+		/* Revealed by .is-positioned once measured, so it is never painted at a
+		   stale position. */
+		visibility: hidden;
+		--tooltip-bg: #e0e0e0;
+		--tooltip-text: #333;
+	}
+
+	.tooltip-v2-floating.is-positioned {
+		visibility: visible;
 	}
 
 	:global(.dark) .tooltip-v2-floating {
-		--tooltip-bg: var(--pui-color-gray-800);
-		--tooltip-text: var(--pui-color-gray-200);
+		--tooltip-bg: rgb(51, 52, 57);
+		--tooltip-text: #e5e5e5;
 	}
 
 	.tooltip-v2-content {
 		background: var(--tooltip-bg);
 		color: var(--tooltip-text);
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
-		border-radius: var(--pui-radius-lg);
-		font-size: var(--pui-font-size-sm);
-		line-height: var(--pui-line-height-normal);
-		position: relative;
+		padding: 0.5rem 0.75rem;
+		border-radius: 6px;
+		font-size: 0.875rem;
+		line-height: 1.4;
+		overflow-wrap: break-word;
 	}
 
 	:global(.dark) .tooltip-v2-content {
-		box-shadow: var(--pui-shadow-md);
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 	}
 
 	.tooltip-v2-arrow {
@@ -432,4 +564,4 @@
 	:global(.dark) .tooltip-v2-content :global(code) {
 		background: rgba(255, 255, 255, 0.05);
 	}
-</style>
+</style>

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-interface Props {
+export type TooltipLocation = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+export interface TooltipProps {
     /** The element to attach the tooltip to */
     children: Snippet;
     /** Rich content using a Svelte snippet */
@@ -9,7 +10,7 @@ interface Props {
     /** HTML content (use with caution - sanitize user input) */
     html?: string;
     /** Preferred tooltip position */
-    location?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+    location?: TooltipLocation;
     /** Maximum width of tooltip */
     maxWidth?: string;
     /** Offset distance from target element (px) */
@@ -23,6 +24,6 @@ interface Props {
     /** Disable the tooltip */
     disabled?: boolean;
 }
-declare const Tooltip: import("svelte").Component<Props, {}, "">;
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
 type Tooltip = ReturnType<typeof Tooltip>;
 export default Tooltip;