svelte-use-tippy.js

Use tippy.js in svelte

Installation

npm i svelte-use-tippy.js ## yarn add svelte-use-tippy.js

Usage

import default styles:

// main.js
import 'tippy.js/dist/tippy.css';

'use' directive:

<script>
// App.svelte
import { tippy } from 'svelte-use-tippy.js';
</script>

<button use:tippy={{ content: 'My tooltip!' }}>target</button>

or component:

<script>
// App.svelte
import Tippy from 'svelte-use-tippy.js';

let targetEl;
</script>

<button bind:this={targetEl}>target for tippy</button>

<Tippy props={{ trigger: 'click' }} target={targetEl}>
  <h1>My tooltip!</h1>
  <div>description</div>
</Tippy>

or

<button>target for tippy</button>
<Tippy props={{ trigger: 'click' }} target="prev">My tooltip!</Tippy>

or

<Tippy props={{ trigger: 'click' }} target="next">My tooltip!</Tippy>
<button>target for tippy</button>

Important

The 'typpy.js' uses the 'process.env.NODE_ENV'. Replace it when compiling:

// Example in rollup

const mode = process.env.NODE_ENV;

export default {
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify(mode)
    })
    // ...
  ]
};

License

MIT