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>
5 Oct 18, 2022
75.9k Jan 9, 2023
22k Jan 4, 2023
4.7k Jan 4, 2023
16 Jun 19, 2022
39 Jul 30, 2022
60 Oct 8, 2022
5 Aug 3, 2022
40 Nov 25, 2022
29 Oct 13, 2022
446 Jan 3, 2023
1.5k Dec 24, 2022
3 Oct 24, 2022
13 Dec 4, 2022
5 Nov 8, 2022
4k Jan 1, 2023
2.6k Jan 5, 2023
54 Nov 12, 2022
103 Dec 17, 2022