Svelte Tooltip

svelte-tooltip-simple

A simple Svelte component for displaying dynamic tooltips. Automatically decides where to place your tooltip based on your preferences.

How to install

Add to your Svelte or SvelteKit project with the following lines:

npm install svelte-pdf-simple

or

yarn add svelte-pdf-simple

How to use

<script lang="ts">
  import { Tooltip } from "svelte-tooltip-simple";
</script>

<Tooltip text="my tooltip text">
  <button>Click</button>
</Tooltip>

For adding HTML to you tooltip you could do the following

<script lang="ts">
  import { Tooltip } from "svelte-tooltip-simple";
</script>

<Tooltip>
  <button>Click</button>
  <svelte:fragment slot="content">
    <b>Bold</b> text with <i>italic</i> feel
  </svelte:fragment>
</Tooltip>

NOTE If you setup the tooltip text with both through property and slot, the text in the slot will be displayed.

Build

If you are using svelte-kit you shouldn't have any issues after installing the package.

With a simple svelte project though, you'll need to add the following to the plugin list inside rollup.config.js file.

replace({
  "process.env.NODE_ENV": process.env.ROLLUP_WATCH ? "development" : "production",
});

The replace function comes from the @rollup/plugin-replace package.

Props

Placement: top | left | right | bottom | top-start | top-end | left-start | left-end | right-start | right-end | bottom-start | bottom-end

Side: top | left | right | bottom

Theme: light | dark

License

MIT