A simple tooltip action and component designed for Svelte.
Try it in the Svelte REPL.
To install the Svelte 5 version you need to use the beta package.
yarn add @svelte-plugins/tooltips@beta # or with NPM npm i @svelte-plugins/tooltips@beta # or with PNPM pnpm i @svelte-plugins/tooltips@beta
yarn add @svelte-plugins/tooltips # or with NPM npm i @svelte-plugins/tooltips # or with PNPM pnpm i @svelte-plugins/tooltips
<script> import { Tooltip } from "@svelte-plugins/tooltips"; </script> <Tooltip content="Hello world!"> Check out my tooltip </Tooltip>
<script> import { tooltip } from "@svelte-plugins/tooltips"; </script> Checkout out my <u title="Hello World!" use:tooltip>tooltip</u> Checkout out my <u use:tooltip={{ content: 'Hello World!' }}>tooltip</u>
| Prop | Description | Value |
|---|---|---|
| action | The action that triggers the tooltip (hover | click |
| animation | The animation to apply to the tooltip | string (default: ``) |
| arrow | If false, the tooltip arrow will not be shown. |
boolean (default: true) |
| autoPosition | Adjust tooltip position if viewport clipping occurs | boolean (default: false) |
| content | The string or object containing componentref and props | string |
| delay | The animation delay in milliseconds to apply to the tooltip | number (default: 200) |
| hideOnClickOutside | Hides a tooltip when an outside click occurs | boolean (default: false) |
| maxWidth | The max allowable width of the tooltip content | number (default: 200) |
| position | The position where the tooltip should appear relative to its parent | string (default: top) |
| show | Allows you to manually control the tooltip visibility | boolean (default: false) |
| style | The object containing theme variable overrides | object (default: null) |
| theme | The CSS theme class name | string (default: ``) |
| Prop | Description | Value |
|---|---|---|
| content.component | Svelte component | component (default: null) |
| content.props | Any component propeties | object (default: null) |
<script> import ComponentAsTooltip from './ComponentAsTooltip'; </script> Checkout out my <span use:tooltip={{ content: { component: ComponentAsTooltip, props: { title: 'Hello World!' } } }}>tooltip</span>
You can customize tooltips theme using several methods:
- Assign a theme class name via the
themeproperty that includes all of your CSS variables overrides - Define the overrides directly using the
styleproperty - Override the CSS variables globally
Tooltip CSS variables:
--tooltip-arrow-size: 10px; --tooltip-background-color: rgba(0, 0, 0, 0.9); --tooltip-border-radius: 4px; --tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25); --tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; --tooltip-font-size: 14px; --tooltip-font-weight: 500; --tooltip-line-height: 1.25rem; --tooltip-color: #fff; --tooltip-offset-x: 12px; --tooltip-offset-y: 12px; --tooltip-padding: 12px; --tooltip-white-space-hidden: nowrap; --tooltip-white-space-shown: normal; --tooltip-z-index: 100;
// action <span title="hello world!" use:tooltip={{ theme: 'custom-tooltip' }}>Hover over me</span> // component <Tooltip content="hello world!" theme="custom-tooltip">Hover over me</Tooltip> <style> :global(.tooltip.custom-tooltip) { --tooltip-background-color: hotpink; --tooltip-box-shadow: 0 1px 8px pink; } </style>
// action <span title="hello world!" use:tooltip={{ style: { backgroundColor: 'blue', borderRadius: '10px' } }}>Hover over me</span> // component <Tooltip content="hello world!" style={{ style: { backgroundColor: 'blue' } }}>Hover over me</Tooltip>