Simple beautiful tooltip in the form of Svelte 3 action
This is Svelte's action to create some small minimalistic tooltips.
- Easy to use (an implementation through the Svelte action 💥)
- Light size
- Customizable 🔥
npm i svelte-tooltip-action
<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>
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
.
- Check CSS
position: relative
on your<div />
(on<div />
withuse: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
MIT © Denis Stasyev