@finsweet/webflow-apps-utils 1.0.16 → 1.0.17

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

@@ -17,38 +17,10 @@
 	import { cleanupTooltipMessage } from '../../../utils';
 
 	import Text from '../text/Text.svelte';
+	import type { TooltipProps } from './types';
 
 	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 {
 		message = '',
 		listener = 'hover',
@@ -70,11 +42,12 @@
 		fontColor = 'var(--text2)',
 		bgColor = '',
 		class: className = '',
+		targetClassName = '',
 		target,
 		tooltip,
 		onshow,
 		onclose
-	}: Props = $props();
+	}: TooltipProps = $props();
 
 	type TooltipInstance = {
 		toggle: HTMLElement;
@@ -335,7 +308,7 @@
 	});
 </script>
 
-<div class="target" bind:this={targetElement} aria-describedby={tooltipId}>
+<div class="target {targetClassName}" bind:this={targetElement} aria-describedby={tooltipId}>
 	{#if target}
 		{@render target()}
 	{:else}
@@ -391,6 +364,9 @@
 		font-weight: 500;
 		font-size: 11px;
 	}
+	.target {
+		display: inline-flex;
+	}
 	.tooltip {
 		display: none;
 		top: 0;

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

@@ -1,34 +1,6 @@
-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, {
+import { type Component } from 'svelte';
+import type { TooltipProps } from './types';
+declare const Tooltip: Component<TooltipProps, {
     show: () => void | undefined;
     hide: () => void | undefined;
 }, "hidden" | "isActive">;

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

@@ -2,6 +2,14 @@ import type { Placement } from '@floating-ui/dom';
 import type { Component, Snippet } from 'svelte';
 export type TooltipListener = 'click' | 'hover';
 export interface TooltipProps {
+    /**
+     * Event handler for tooltip show
+     */
+    onshow?: (event: boolean) => void;
+    /**
+     * Event handler for tooltip show
+     */
+    onclose?: (event: boolean) => void;
     /**
      * The tooltip message content
      */
@@ -74,6 +82,10 @@ export interface TooltipProps {
      * Font color for tooltip text
      */
     fontColor?: string;
+    /**
+     * Target element class name
+     */
+    targetClassName?: string;
     /**
      * Target element snippet (what triggers the tooltip)
      */

package/package.json

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