svelte-tooltip-simple

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

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

License

MIT