Skip to content

denisstasyev/svelte-tooltip-action

Repository files navigation

svelte-tooltip-action

NPM version NPM downloads Svelte v3

Simple beautiful tooltip in the form of Svelte 3 action

example

🍰 Features

This is Svelte's action to create some small minimalistic tooltips.

  • Easy to use (an implementation through the Svelte action 💥)
  • Light size
  • Customizable 🔥

Install

npm i svelte-tooltip-action

Usage

<script>
  import tooltip from 'svelte-tooltip-action'

  ...

  const text = 'Some extra text here (advice)'
  const style = 'left: 0; bottom: -24px;'
</script>

<div use:tooltip={{ text: text, style: style }}>
  Your awesome content here (for example, buttons)
</div>

API

Parameters

Name Type Default Description
text string empty string Tooltip's text
style string empty string Your custom CSS

You can use style parameter to customize position of your tooltip instance with CSS left: ..., top: ..., right: ..., bottom: .... Sometimes it's useful to combine several rules together. For example, if you want horizontally center tooltip use: left: 50%; width: $tooltip-width; margin-left: $tooltip-width / 2.

Why my overlap not working?

  • Check CSS position: relative on your <div /> (on <div /> with use:tooltip)
  • Also do not put CSS overflow: hidden on parent HTML tags (in case of your tooltip will go over parents)
  • Please note that not all components can be overlaid with a tooltip because the target Svelte property is used under the hood:
new Tooltip({
  target: node,
  props: { text, style },
})

This property has some limitations. For example you cannot use it on <img/>, but you can wrap the image, so the tooltip will work:

<div use:tooltip={{text: 'Hi', style: 'left: 0; bottom: 0;'}}>
  <img src='...' alt='...'/>
</div>
  • Check CSS z-index

License

MIT © Denis Stasyev