Svelte Tooltips

A Svelte tooltip plugin is a small pop-up element that appears while the user moves the mouse pointer over an element.
Keep reading these examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Example

Copy

<SvelteTooltip tip="Tooltip on top" top>
  <BaseButton size="sm" type="primary">Tooltip on top</BaseButton>
</SvelteTooltip>

<SvelteTooltip tip="Tooltip on right" right>
  <BaseButton size="sm" type="primary">Tooltip on right</BaseButton>
</SvelteTooltip>

<SvelteTooltip tip="Tooltip on bottom" bottom>
  <BaseButton size="sm" type="primary">Tooltip on bottom</BaseButton>
</SvelteTooltip>

<SvelteTooltip tip="Tooltip on left" left>
  <BaseButton size="sm" type="primary">Tooltip on left</BaseButton>
</SvelteTooltip>