SVooltip

https://svooltip.vercel.app/
Admin
SVooltip is a lightweight Svelte tooltip directive powered by Floating UI that provides simple...
Tokens:2,526
Snippets:22
Trust Score:7.8
Update:5 months ago
Show doc for...
Tokens:
Raw
### SVooltip Directive API

Source: https://svooltip.vercel.app

Configuration options for the `svooltip` directive.

```APIDOC
## `svooltip` Directive API

This table outlines the available properties for the `svooltip` directive.

| Prop | Type | Description | Default |
|---|---|---|---|
| `content` | `any` | The content of the tooltip. | |
| `target` | `(string | HTMLElement)?` | The target to append the tooltip to. | `body` |
| `placement` | `Placement?` | The placement of the tooltip relative to the element. | `top` |
| `shiftPadding` | `number?` | Padding for the `shift` middleware. | `5` |
| `offset` | `number?` | The offset of the tooltip in `px`. | `10` |
| `delay` | `(number | [number, number])?` | The delay for showing and hiding the tooltip. A `number` will apply to both in and out. An `array` will apply the in and out delays separately (`in` being the first index and `out` being the second). | `0` |
| `show` | `boolean?` | Always display the tooltip. | `false` |
| `classes.container` | `string?` | The classes to be applied on the tooltip itself. | `svooltip` |
| `classes.arrow` | `string?` | The classes to be applied on the tooltip arrow. | `svooltip-arrow` |
| `classes.animationEnter` | `string?` | The classes to be applied when the tooltip is entering. | `svooltip-entering` |
| `classes.animationLeave` | `string?` | The classes to be applied when the tooltip is leaving. | `svooltip-leaving` |
| `middleware` | `Middleware?` | Any Floating UI middleware you wish to add. | `[]` |
| `html` | `boolean?` | What type of rendering to be used. Setting to `true` will use the element `innerHTML` rather than `textContent`. So be sure to sanitize user content. | `false` |
| `visibility` | `boolean?` | Conditionally show the tooltip. | `true` |
| `onMount` | `Function` | A function that fires when the tooltip has been mounted to the DOM. | `() => {}` |
| `onDestroy` | `Function` | A function that fires when the tooltip has been removed from the DOM. | `() => {}` |
```

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

### Importing SVooltip Styles with SASS

Source: https://svooltip.vercel.app

When using SASS, import the SVooltip styles using `@use 'svooltip/styles';`. You can reassign default variables or configure Sass variables for customization.

```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.
```

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

### Tooltip Component API

Source: https://svooltip.vercel.app

Usage and considerations for the `Tooltip` component.

```APIDOC
## Tooltip Component

If you cannot use the Svelte `use` action, you can import and use the `Tooltip` component.

```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>
```

**Considerations:**
*   The component wraps the content in a `div`, which may cause CSS selection issues.
*   The default block style is `inline-block`, potentially causing positioning issues. Sass variables `$wrapperBlock` and `$wrapperInline`, and CSS variables `--svooltip-wrapper` and `--svooltip-wrapper-inline` are available for customization.
*   Multiple elements inside the `Tooltip` component will stretch over the entire container, meaning hovering on whitespace will still display the tooltip.

**Note:** The component is named `Tooltip` while the action is `tooltip`.
```

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

### Basic Tooltip Usage in Svelte

Source: https://svooltip.vercel.app

Use the `tooltip` directive to add a basic tooltip to an HTML element. Include the default styling by importing 'svooltip/styles.css'.

```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>
```

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

### Tooltip Hook Functions (Svelte)

Source: https://svooltip.vercel.app

Utilize Svelte's `use:tooltip` directive with `onMount` and `onDestroy` hook functions to dynamically update tooltip content and manage its state during its lifecycle.

```javascript
<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>
```

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

### Tooltip CSS Animations

Source: https://svooltip.vercel.app

Apply CSS animations for entering and leaving tooltips using keyframes. This ensures smooth transitions and allows for DOM cleanup via the `animationend` event.

```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;
	}
}
```

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

### HTML Content in Tooltip

Source: https://svooltip.vercel.app

Render HTML content within the tooltip by setting the `html` option to `true`. Ensure user-generated content is sanitized before rendering.

```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>
```

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

### Tooltip Component Usage

Source: https://svooltip.vercel.app

Use the `Tooltip` component as an alternative to the `tooltip` directive. This component wraps its children in a `div`, which might affect CSS selection and positioning.

```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 CSS Variables

Source: https://svooltip.vercel.app

Customize the default tooltip styling using CSS variables for background, 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;
}
```

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

### Tooltip Placement Styling

Source: https://svooltip.vercel.app

Customize the transform origin of tooltips based on their placement attribute. This allows for animations that originate from the correct edge or corner.

```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;
}
```

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

### Tooltip with Title Attribute Fallback

Source: https://svooltip.vercel.app

Provide a fallback tooltip using the `title` attribute for environments without JavaScript. The `title` attribute is automatically removed if JavaScript is enabled and the `content` option is used.

```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>
```
Tokens:
Raw