Tippy Tooltip

There are few options on how to include/import Tippy Tooltip into your project. Make sure you have installed Tippy package in order to use this package.

Install from Yarn

Install the Tippy Tooltip Js library from command prompt from the root directory of the project:

yarn add tippy.j --save

How to import tippy Tooltip package?

import tippy, { followCursor } from 'tippy.js';
import 'tippy.js/dist/tippy.css';
import 'tippy.js/animations/scale.css';
import 'tippy.js/animations/scale-subtle.css';
import 'tippy.js/animations/scale-extreme.css';

To apply tippy Tooltip add the below code in the init.js file.

let tooltipElement: HTMLAnchorElement;
onMount(() => {
    tippy(tooltipElement, {
        content,
        placement: position,
        trigger,
        ...additionalFunc,
        plugins: [followCursor]
    });
});

<a href="#!" bind:this={tooltipElement} class="transition duration-300 ease-linear hover:z-10">
    <button class={`btn ` + btnStyle}>{btnValue} </button>
</a>