https://github.com/denisstasyev/svelte-tooltip-action

Nice tooltip in the form of Svelte action :dog:
https://github.com/denisstasyev/svelte-tooltip-action

action svelte svelte3 tooltip

Last synced: 3 months ago
JSON representation

Nice tooltip in the form of Svelte action :dog:

• Host: GitHub
• URL: https://github.com/denisstasyev/svelte-tooltip-action
• Owner: denisstasyev
• Created: 2020-08-14T17:49:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-06-21T06:24:44.000Z (over 3 years ago)
• Last Synced: 2024-09-29T12:06:11.887Z (3 months ago)
• Topics: action, svelte, svelte3, tooltip
• Language: JavaScript
• Homepage:
• Size: 14.6 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-tooltip-action

[![NPM version](https://img.shields.io/npm/v/svelte-tooltip-action.svg?style=flat)](https://www.npmjs.com/package/svelte-tooltip-action) [![NPM downloads](https://img.shields.io/npm/dm/svelte-tooltip-action.svg?style=flat)](https://www.npmjs.com/package/svelte-tooltip-action) [![Svelte v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev)

Simple beautiful tooltip in the form of Svelte 3 action

![example](https://user-images.githubusercontent.com/25938785/90321786-a6179900-df55-11ea-8a77-0e0aff9e32c1.gif)

## :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

```bash

npm i svelte-tooltip-action

```

## Usage

```html

  import tooltip from 'svelte-tooltip-action'

  ...

  const text = 'Some extra text here (advice)'

  const style = 'left: 0; bottom: -24px;'



  Your awesome content here (for example, buttons)



```


## 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 `
` (on `
` 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:


```js

new Tooltip({

  target: node,

  props: { text, style },

})

```

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

```html



  



```


- Check CSS `z-index`

## License

MIT © [Denis Stasyev](https://github.com/denisstasyev)