Tippy.js for svelte

A svelte action for creating tippy.js tooltips.

Getting started

# Pnpm
pnpm add svelte-tippy tippy.js

# Yarn
yarn add svelte-tippy tippy.js

# NPM
npm install svelte-tippy tippy.js --save

Usage

<script lang="ts">
  import {tippy} from '$lib/tippy';
  import 'tippy.js/dist/tippy.css'; // optional
</script>

<button use:tippy={{content: 'Test', placement: 'left'}}>Test</button>

Extending

Sometimes you might want to create custom tooltips and reuse them throughout your application.

import 'tippy.js/animations/perspective-subtle.css';
import {createTippy} from 'svelte-tippy';

export const tippy = createTippy({
  animation: 'perspective-subtle',
  arrow: false
});

And then you can use the custom action with these defaults applied

<script lang="ts">
  import {tippy} from '$lib/tippy';
</script>

<button use:tippy={{content: 'Test'}}>Test</button>

Tailwind/WindiCSS example

<script lang="ts">
  import tippy from 'svelte-tippy';
  import 'tippy.js/animations/perspective-subtle.css';
</script>

<button
  class="button"
  use:tippy={{
    content: 'Test',
    placement: 'bottom',
    arrow: false,
    theme: 'test',
    animation: 'perspective-subtle'
  }}
>
  Test
</button>

<style>
  :global(.tippy-box[data-theme='test']) {
    @apply inline-block py-1 px-2.5 text-sm font-medium rounded-lg shadow-sm;
    @apply text-white bg-gray-900;
  }
</style>