@svelte-plugins/tooltips
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

@svelte-plugins/tooltips

A simple tooltip action and component designed for Svelte.

Try it in the Svelte REPL.

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

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>

Changelog

Changelog

License

MIT

Package Sidebar

Install

npm i @svelte-plugins/tooltips

Weekly Downloads

3,401

Version

3.0.1

License

MIT

Unpacked Size

94.7 kB

Total Files

35

Last publish

Collaborators

  • dysfunc