@svelte-plugins/tooltips

@svelte-plugins/tooltips

A simple tooltip action and component designed for Svelte.

Try it in the Svelte REPL.

Install

yarn add -D @svelte-plugins/tooltips

# or with NPM

npm i -D @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
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	string (default: false)
content	The string or object containing componentref and props	string
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)
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>

Changelog

Changelog

License

MIT

Changelog

0.1.2 - 2022-08-21

• Add theme property and update documentation