@svelte-plugins/tooltips NPM

@svelte-plugins/tooltips

A simple tooltip action and component designed for Svelte.

Install

yarn add @svelte-plugins/tooltips

# or with NPM

npm i @svelte-plugins/tooltips

# or with PNPM

pnpm i @svelte-plugins/tooltips

Using the Tooltip component

<script>
  import { Tooltip } from "@svelte-plugins/tooltips";
</script>

<Tooltip content="Hello world!">
 Check out my tooltip
</Tooltip>

Using the Tooltip action

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

API

Props

Prop	Description	Value
action	The action that triggers the tooltip (hover	click	prop)	`string` (default: `hover`)
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`	`object` component (default: )
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: )

Using components as content

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>

Theming

You can customize tooltips theme using several methods:

Assign a theme class name via the theme property that includes all of your CSS variables overrides
Define the overrides directly using the style property
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;

Using the theme property

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

Using the style property

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