### Install SVooltip and Import Styles

Source: https://context7.com/gibbu/svooltip/llms.txt

Install the package using npm and import the directive and its default styles.

```bash
npm install svooltip
```

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';
</script>
```

--------------------------------

### Tooltip with Lifecycle Hooks (onMount, onDestroy)

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

Utilize `onMount` and `onDestroy` hook functions to trigger actions during the tooltip's lifecycle. This example demonstrates updating tooltip content dynamically after a delay and resetting it upon destruction.

```svelte
<script>
	const info = [
		'John Doe',
		32,
		'john@doe.com'
	];

	$: currentInfo = info[0];
	let html = false;
</script>

<button
	use:tooltip={{
		content: currentInfo,
		format,
		onMount() {
			setTimeout(() => {
				html = true;
				currentInfo = `
					<h1>${info[0]}</h1>
					<p>${info[1]}</p>
					<small>${info[2]}</small>
				`;
			}, 1000);
		},
		onDestroy() {
			currentInfo = info[0];
		}
	}}
>
	User information
</button>

```

--------------------------------

### SVooltip Action with All Options

Source: https://context7.com/gibbu/svooltip/llms.txt

Demonstrates the extensive configuration options available for the `tooltip` action, including placement, delay, target, and custom classes.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';
</script>

<!-- All options -->
<button
  use:tooltip={{
    content: "You're looking beautiful today!",
    placement: 'top-start',   // Floating UI Placement string
    offset: 15,               // px distance from element
    delay: [1000, 0],         // [showDelay, hideDelay] in ms
    target: '#layers',        // CSS selector or HTMLElement to append tooltip into
    shiftPadding: 5,          // padding for shift middleware
    visibility: true,         // conditionally render the tooltip
    constant: false,          // always show (never hide)
    html: false,              // render content as innerHTML
    classes: {
      container: 'svooltip',
      content: 'svooltip-content',
      arrow: 'svooltip-arrow',
      animationEnter: 'svooltip-entering',
      animationLeave: 'svooltip-leaving'
    },
    middleware: [],            // extra Floating UI middleware
    onMount() { console.log('tooltip shown'); },
    onDestroy() { console.log('tooltip hidden'); }
  }}
>
  Hover me for 1 second
</button>
```

--------------------------------

### SVooltip Lifecycle Hooks (onMount, onDestroy)

Source: https://context7.com/gibbu/svooltip/llms.txt

Implement `onMount` and `onDestroy` callbacks to execute logic when the tooltip is added or removed from the DOM, useful for data loading or state synchronization.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';

  const info = ['John Doe', 32, 'john@doe.com'];
  let currentInfo = $state(info[0]);
  let html = $state(false);
</script>

<button
  use:tooltip={{
    content: currentInfo,
    html,
    onMount() {
      // Simulate async data load after tooltip appears
      setTimeout(() => {
        html = true;
        currentInfo = "
          <h1>${info[0]}</h1>
          <p>${info[1]}</p>
          <small>${info[2]}</small>
        ";
      }, 1000);
    },
    onDestroy() {
      // Reset state when tooltip closes
      html = false;
      currentInfo = info[0];
    }
  }}
>
  User information
</button>
```

--------------------------------

### Svooltip Configuration Options

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

This table outlines the available properties for customizing the Svooltip component. Each property allows for specific adjustments to the tooltip's behavior and appearance.

```APIDOC
## Svooltip Configuration

### Description
Configuration options for the Svooltip component.

### Properties
- `content` (any) - Required - The content of the tooltip.
- `target` (string | HTMLElement)? - Optional - The target to append the tooltip to. Defaults to `body`.
- `placement` (Placement)? - Optional - The placement of the tooltip relative to the element. Defaults to `top`.
- `shiftPadding` (number)? - Optional - Padding for the `shift` middleware. Defaults to `5`.
- `offset` (number)? - Optional - The offset of the tooltip in `px`. Defaults to `10`.
- `delay` (number | [number, number])? - Optional - The delay for showing and hiding the tooltip. A number applies to both in and out. An array applies in and out delays separately. Defaults to `0`.
- `show` (boolean)? - Optional - Always display the tooltip. Defaults to `false`.
- `classes.container` (string)? - Optional - The classes to be applied on the tooltip itself. Defaults to `svooltip`.
- `classes.arrow` (string)? - Optional - The classes to be applied on the tooltip arrow. Defaults to `svooltip-arrow`.
- `classes.animationEnter` (string)? - Optional - The classes to be applied when the tooltip is entering. Defaults to `svooltip-entering`.
- `classes.animationLeave` (string)? - Optional - The classes to be applied when the tooltip is leaving. Defaults to `svooltip-leaving`.
- `middleware` (Middleware)? - Optional - Any Floating UI middleware you wish to add. Defaults to `[]`.
- `html` (boolean)? - Optional - What type of rendering to be used. Setting to `true` will use the element `innerHTML` rather than `textContent`. Defaults to `false`.
- `visibility` (boolean)? - Optional - Conditionally show the tooltip. Defaults to `true`.
```

--------------------------------

### Tooltip Placement with SVooltip

Source: https://context7.com/gibbu/svooltip/llms.txt

Configure tooltip positioning using Floating UI placement strings. The tooltip automatically flips and shifts to stay within the viewport.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';
</script>

<!-- All valid placement values -->
<!-- 'top' | 'top-start' | 'top-end'       -->
<!-- 'bottom' | 'bottom-start' | 'bottom-end' -->
<!-- 'left' | 'left-start' | 'left-end'    -->
<!-- 'right' | 'right-start' | 'right-end' -->

<button use:tooltip={{ content: 'Bottom tooltip', placement: 'bottom' }}>Bottom</button>
<button use:tooltip={{ content: 'Right tooltip', placement: 'right' }}>Right</button>
<button use:tooltip={{ content: 'Top-start tooltip', placement: 'top-start' }}>Top-start</button>
```

--------------------------------

### Basic Tooltip Usage in Svelte

Source: https://github.com/gibbu/svooltip/blob/main/README.md

Demonstrates how to import and use the `tooltip` directive in a Svelte component. Includes importing default styles and configuring tooltip content, placement, delay, offset, and target element.

```svelte
<script>
	import { tooltip } from 'svooltip';
	import 'svooltip/styles.css'; // Include default styling
</script>

<button
	class="btn"
	use:tooltip={{
		content: "You're looking beautiful today!",
		placement: 'top-start',
		delay: [1000, 0],
		offset: 15,
		target: '#layers'
	}}
>
	Hover me for 1 second
</button>
```

--------------------------------

### onMount

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

A function that fires when the tooltip has been mounted to the DOM.

```APIDOC
## onMount

### Description
A function that fires when the tooltip has been mounted to the DOM.

### Function Signature
`onMount`

### Parameters
This function does not accept any parameters.

### Return Value
This function does not return any value.
```

--------------------------------

### Basic SVooltip Action Usage

Source: https://context7.com/gibbu/svooltip/llms.txt

Use the `tooltip` action on an HTML element to display a simple tooltip on hover.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';
</script>

<!-- Basic usage -->
<button use:tooltip={{ content: 'Hello world' }}>
  Hover me
</button>
```

--------------------------------

### Using the Tooltip Component

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

Import and use the `Tooltip` component directly if the Svelte `use` action is not suitable. Be aware of potential CSS selection and positioning issues due to the wrapper `div` and default `inline-block` styling. CSS variables are available for customization.

```svelte
<script>
	import {Tooltip} from 'svooltip';
	import Component from 'external-lib/component';
</script>

<Tooltip content="I'm over the component">
	<Component>Hover me</Component>
</Tooltip>

```

--------------------------------

### Tooltip Show/Hide Delay with SVooltip

Source: https://context7.com/gibbu/svooltip/llms.txt

Set custom delays for tooltip appearance and disappearance using a number for uniform delay or a tuple for independent show/hide delays in milliseconds.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';
</script>

<!-- 500ms delay on both show and hide -->
<button use:tooltip={{ content: 'Balanced delay', delay: 500 }}>Hover</button>

<!-- 1000ms to show, instant hide -->
<button use:tooltip={{ content: 'Slow show', delay: [1000, 0] }}>Hover</button>

<!-- Instant show, 300ms to hide -->
<button use:tooltip={{ content: 'Slow hide', delay: [0, 300] }}>Hover</button>
```

--------------------------------

### Custom Floating UI Middleware for Tooltip

Source: https://context7.com/gibbu/svooltip/llms.txt

Extend tooltip positioning behavior by passing custom Floating UI middleware. Built-in middleware like `flip`, `shift`, `offset`, and `arrow` are always included.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';
  import { size } from '@floating-ui/dom';
</script>

<button
  use:tooltip={{
    content: 'Sized tooltip',
    middleware: [
      size({
        apply({ availableWidth, availableHeight, elements }) {
          Object.assign(elements.floating.style, {
            maxWidth: `${availableWidth}px`,
            maxHeight: `${availableHeight}px`
          });
        }
      })
    ]
  }}
>
  Hover
</button>
```

--------------------------------

### Basic Tooltip Wrapper Component

Source: https://context7.com/gibbu/svooltip/llms.txt

Use the Tooltip component as a wrapper for other Svelte components when `use:` directives are not applicable. It accepts standard tooltip options plus `block` and `as` props.

```svelte
<script>
  import { Tooltip } from 'svooltip';
  import 'svooltip/styles.css';
  import ExternalButton from 'some-ui-lib/Button.svelte';
</script>

<!-- Basic wrapper -->
<Tooltip content="I'm over the component">
  <ExternalButton>Hover me</ExternalButton>
</Tooltip>

<!-- Block display wrapper using a <span> tag -->
<Tooltip content="Inline block" as="span" block>
  <ExternalButton>Full-width hover</ExternalButton>
</Tooltip>

<!-- With delay and placement -->
<Tooltip content="Bottom with delay" placement="bottom" delay={[300, 100]}>
  <ExternalButton>Hover</ExternalButton>
</Tooltip>
```

--------------------------------

### CSS Custom Properties for Theming

Source: https://context7.com/gibbu/svooltip/llms.txt

Customize tooltip appearance at runtime using CSS custom properties. These have lower priority than SCSS variables.

```css
/* CSS custom properties (runtime, lower priority than SCSS vars) */
:root {
  --svooltip-bg: #444;
  --svooltip-text: #fff;
  --svooltip-padding: 4px 8px;
  --svooltip-roundness: 4px;
  --svooltip-weight: 500;
  --svooltip-text-size: 0.875rem;
  --svooltip-shadow: 0 2px 5px rgb(0 0 0 / 0.35);
  --svooltip-arrow-size: 12px;
  --svooltip-animation-duration: 0.15s;
  --svooltip-index: 1;
}
```

--------------------------------

### Tooltip with HTML Content

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

Enable HTML content within the tooltip by setting the `html` option to `true`. Remember to sanitize any user-generated content before displaying it.

```svelte
<button
	class="bg-neutral-800 rounded px-3 py-2 text-sm text-neutral-50"
	use:tooltip={{
		content: `<h1 class="text-white text-3xl line-through">Hi there</h1> <strong class="font-bold">This is using a HTML string</strong>`,
	html: true
	}}
>
	HTML Content
</button>

```

--------------------------------

### Dynamic Tooltip Content with Reactivity

Source: https://context7.com/gibbu/svooltip/llms.txt

The tooltip content can be reactive. Update the bound variable, and the tooltip will automatically re-render using the action's `update()` hook.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';

  let count = $state(0);
</script>

<button
  use:tooltip={{ content: `Clicked ${count} times` }}
  onclick={() => count++}
>
  Click me
</button>
<!-- Tooltip text automatically reflects the latest count value -->
```

--------------------------------

### Always-Visible Tooltip with SVooltip

Source: https://context7.com/gibbu/svooltip/llms.txt

Enable a persistent tooltip using the `constant: true` option, which keeps the tooltip visible immediately on mount and prevents it from hiding.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';
</script>

<button use:tooltip={{ content: 'Always visible', constant: true }}>
  I always have a tooltip
</button>
```

--------------------------------

### CSS Animations for Tooltip

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

Animate tooltips using CSS `@keyframes` by targeting the `animationEnter` and `animationLeave` classes. The default styling includes `scaleIn` and `scaleOut` animations. Using keyframes allows for `animationend` event listeners to manage DOM removal.

```css
.svooltip-entering {
	animation: scaleIn 0.15s ease forwards;
}
.svooltip-leaving {
	animation: scaleOut 0.15s ease forwards;
}
@keyframes scaleIn {
	from {
		transform: scale(0.95);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes scaleOut {
	from {
		transform: scale(1);
		opacity: 1;
	}
	to {
		transform: scale(0.95);
		opacity: 0;
	}
}

```

--------------------------------

### SCSS Variables for Compile-Time Customization

Source: https://context7.com/gibbu/svooltip/llms.txt

Customize tooltip appearance at compile time using SCSS variables. This provides the highest priority for theming.

```scss
// SCSS variables (compile-time, highest priority)
// In your global <style lang="scss"> block:
@use 'svooltip/styles' with (
  $bg: #1e1e2e,
  $text: #cdd6f4,
  $roundness: 8px,
  $arrow-size: 10px,
  $animation-duration: 0.2s
);
```

--------------------------------

### Custom CSS Classes for Tooltip Styling

Source: https://context7.com/gibbu/svooltip/llms.txt

Override default BEM-style class names for the tooltip container, content, arrow, and animation elements. Ensure your custom stylesheet is imported instead of `svooltip/styles.css`.

```svelte
<script>
  import { tooltip } from 'svooltip';
  // Use your own stylesheet instead of svooltip/styles.css
</script>

<button
  use:tooltip={{
    content: 'Custom styled',
    classes: {
      container: 'my-tooltip',
      content: 'my-tooltip__text',
      arrow: 'my-tooltip__arrow',
      animationEnter: 'my-tooltip--enter',
      animationLeave: 'my-tooltip--leave'
    }
  }}
>
  Hover
</button>
```

```css
/* Your custom stylesheet */
.my-tooltip {
  position: absolute;
  background: #1a1a2e;
  color: #e0e0e0;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
}
.my-tooltip__arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #1a1a2e;
  rotate: 45deg;
}
.my-tooltip--enter { animation: fadeIn 0.2s ease forwards; }
.my-tooltip--leave { animation: fadeOut 0.2s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
```

--------------------------------

### Importing SASS Styles for Tooltip

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

Import the default SASS styling for tooltips. You can reassign SASS variables to customize defaults, and these configurations take precedence over CSS custom properties. Ensure the `global` attribute is set on your style tag to avoid Svelte scoping.

```scss
@use 'svooltip/styles'; // Include default styling

// To change defaults, reassign variables like this: @use 'svooltip/styles' with ($bg: red);

// Sass configuration have higher priority than css custom properties:
@use 'svooltip/styles' as * with (
	$bg: violet
);

.svooltip {
	--svooltip-bg: green;
}

// This will make the tooltip violet.

```

--------------------------------

### Custom Append Target for SVooltip

Source: https://context7.com/gibbu/svooltip/llms.txt

Specify a custom DOM element or CSS selector for appending tooltips, useful for managing stacking contexts or scrollable areas.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';
</script>

<!-- Append by CSS selector -->
<button use:tooltip={{ content: 'In #layers', target: '#layers' }}>Hover</button>

<!-- Append by HTMLElement reference -->
<script>
  let layerEl;
</script>

<div bind:this={layerEl} id="layers" style="position: relative;"></div>
<button use:tooltip={{ content: 'In element ref', target: layerEl }}>Hover</button>
```

--------------------------------

### Conditional Tooltip Visibility with SVooltip

Source: https://context7.com/gibbu/svooltip/llms.txt

Control tooltip visibility dynamically using the `visibility` option. When `false`, the tooltip is disabled without removing the directive.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';

  let isAdmin = $state(false);
</script>

<button
  use:tooltip={{
    content: 'Admin-only action',
    visibility: isAdmin
  }}
>
  Delete all
</button>
<label><input type="checkbox" bind:checked={isAdmin} /> Toggle admin</label>
```

--------------------------------

### onDestroy

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

A function that fires when the tooltip has been removed from the DOM.

```APIDOC
## onDestroy

### Description
A function that fires when the tooltip has been removed from the DOM.

### Function Signature
`onDestroy`

### Parameters
This function does not accept any parameters.

### Return Value
This function does not return any value.
```

--------------------------------

### Data Placement Attribute for Animations

Source: https://context7.com/gibbu/svooltip/llms.txt

Utilize the `data-placement` attribute on the tooltip element to drive placement-aware CSS animations. Adjust `transform-origin` based on the computed placement.

```css
/* Built-in defaults — adjust transform-origin per placement */
.svooltip[data-placement='top']          { transform-origin: bottom center; }
.svooltip[data-placement='top-start']    { transform-origin: bottom left; }
.svooltip[data-placement='top-end']      { transform-origin: bottom right; }
.svooltip[data-placement='bottom']       { transform-origin: top center; }
.svooltip[data-placement='bottom-start'] { transform-origin: top left; }
.svooltip[data-placement='bottom-end']   { transform-origin: top right; }
.svooltip[data-placement='left']         { transform-origin: right center; }
.svooltip[data-placement='right']        { transform-origin: left center; }

/* Custom per-placement animation */
.svooltip[data-placement^='top'] .svooltip-entering {
  animation: slideUp 0.15s ease forwards;
}
@keyframes slideUp {
  from { transform: translateY(4px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
```

--------------------------------

### Tooltip with Title Attribute Fallback

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

Use the `title` attribute as a fallback for users without JavaScript enabled. The `title` attribute will be automatically removed if JavaScript is active. Configure placement, delay, and offset for the tooltip.

```svelte
<button
	class="btn"
	title="You're looking beautiful today!"
	use:tooltip={{
		// content: "You're looking beautiful today!",
		placement: 'top-start',
		delay: [1000, 0],
		offset: 15,
		target: '#layers'
	}}
>
	Hover me for 1 second
</button>

```

--------------------------------

### Customizing Tooltip with CSS Variables

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

Customize tooltip appearance by overriding default CSS variables. This includes background color, text color, padding, font weight, text size, shadow, and arrow size.

```css
:root {
	--svooltip-bg: #fff;
	--svooltip-text: #000;
	--svooltip-padding: 6px 10px;
	--svooltip-weight: 400;
	--svooltip-text-size: 16px;
	--svooltip-shadow: 0 3px 7px rgb(0 0 0 / 0.25);
	--svooltip-arrow-size: 6px;
}

```

--------------------------------

### SVooltip Title Attribute Fallback

Source: https://context7.com/gibbu/svooltip/llms.txt

SVooltip automatically uses the native `title` attribute as content if `content` is omitted, then removes the attribute to prevent duplicate tooltips.

```svelte
<script>
  import { tooltip } from 'svooltip';
  import 'svooltip/styles.css';
</script>

<!-- Works without JavaScript (shows native title tooltip) -->
<!-- With JavaScript: SVooltip removes `title` and renders its own tooltip -->
<button
  title="Fallback tooltip text"
  use:tooltip={{ placement: 'bottom', delay: [500, 0] }}
>
  Hover me
</button>
```

--------------------------------

### CSS Transform Origin Adjustments by Placement

Source: https://github.com/gibbu/svooltip/blob/main/src/routes/(site)/+page.md

Adjust the `transform-origin` CSS property based on the tooltip's placement attribute for specific animations or styling. This allows for directional scaling effects.

```css
.svooltip[data-placement='top'] {
	transform-origin: bottom center;
}
.svooltip[data-placement='top-start'] {
	transform-origin: bottom left;
}
.svooltip[data-placement='top-end'] {
	transform-origin: bottom right;
}

.svooltip[data-placement='bottom'] {
	transform-origin: top center;
}
.svooltip[data-placement='bottom-start'] {
	transform-origin: top left;
}
.svooltip[data-placement='bottom-end'] {
	transform-origin: top right;
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.