A simple Svelte component for displaying dynamic tooltips. Automatically decides where to place your tooltip based on your preferences.
Add to your Svelte or SvelteKit project with the following lines:
npm install svelte-pdf-simple
or
yarn add svelte-pdf-simple
<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.
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.
| Prop name | Description | Type | Default value | Required |
|---|---|---|---|---|
| text | Tooltip text | string | "" | No |
| placement | Where to place the tooltip relative to the target | Placement |
"top" | No |
| theme | Which theme to use | Theme |
"light" | No |
| hoist | Whether the tooltip should overflow parent | boolean | false | No |
| arrowOffset | How much offset should the tooltip have from the target | number | 8 | No |
| padding | Padding of the text | Record<Side, number> |
{top: 0.3, bottom: 0.3, left: 0.75, right: 0.75 } rem |
No |
| borderRadius | Radius of the tooltip | number | 0.2 rem | No |
| fontSize | Size of the text | 0.875 rem | No | |
| fallbackPlacements | List of possible fallback places in case the tooltip is not visible in the given position. NOTE This does not work perfectly. | Placement[] |
Opposite side of the currently selected one by default the tooltip placement is 'top' | No |
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
MIT