svelte-tooltip-action

Simple beautiful tooltip in the form of Svelte 3 action

🍰 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