svelte-tooltip-action

Simple beautiful tooltip in the form of Svelte 3 action

:cake: Features

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

• Easy to use (an implementation through the Svelte action :boom:)
• Light size
• Customizable :fire:

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