svelte-ktippy

Tippy.js for Svelte.

Install

$ npm i svelte-ktippy

or

$ yarn add svelte-ktippy

How to use

Prepare rollup environment variables

tippy.js makes use of the NODE_ENV on default. To remove it, we use @rollup/plugin-replace

npm i @rollup/plugin-replace

Edit your rollup.config.js

Add: import replace from '@rollup/plugin-replace'; to the head

Add to the plugins array:

replace({
    'process.env.NODE_ENV': JSON.stringify('production')
})

Example

<script>
  import tooltip from "svelte-ktippy";
  import MyRenderedTooltip from "MyRenderedTooltip.svelte"
</script>
<div use:tooltip={{component: MyRenderedTooltip}}>
  Hover me
</div>

Example with properties

<script>
  import tooltip from "svelte-ktippy";
  import TooltipItem from "TooltipItem.svelte"
  let myItem = new Item(.....);
</script>
<div use:tooltip={{component: TooltipItem, props: {item: myItem}}>
  Hover me
</div>

FAQ