Package Exports

svelte-use-tippy.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-use-tippy.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

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

<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