svelte-tippy - npm explorer

svelte-tippy

v1.3.2

0/weekUpdated 3 years agoUnpacked: 12.5 KB

Published by brettm12345

npm install svelte-tippy

alt="Typescript"
src="https://img.shields.io/badge/Typescript-%23007ACC.svg?style=flat&logo=typescript&logoColor=white"
/>

alt="ESLint"
src="https://img.shields.io/badge/ESLint-4B3263?style=flat&logo=eslint&logoColor=white"
/>

alt="Svelte"
src="https://img.shields.io/badge/Svelte-%23f1413d.svg?style=flat&logo=svelte&logoColor=white"
/>

alt="PnPm"
src="https://img.shields.io/badge/Pnpm-%23f69220.svg?style=flat&logo=pnpm&logoColor=white"
/>

alt="Prettier"
src="https://img.shields.io/badge/Prettier-%23f7b93e?style=flat&logo=prettier&logoColor=black"
/>

alt="NPM Package Version"
src="https://img.shields.io/npm/v/svelte-tippy?color=%23CB3837&label=NPM&logo=npm&logoColor=%23ffffff"
/>

alt="Build status"
src="https://img.shields.io/github/workflow/status/brettm12345/svelte-tippy/Test?logo=github"
/>

alt="renovate"
src="https://camo.githubusercontent.com/7597e455e058854f972621894ac91b514e6c0e7b2f6d65ed0cf754d7b2f5f265/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6d61696e7461696564253230776974682d72656e6f766174652d626c75653f6c6f676f3d72656e6f76617465626f74"
/>

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

`svelte

`

`Extending`

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

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

`svelte

`

`Tailwind/WindiCSS example`

!TailwindCSS Demo

`svelte

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

``