https://github.com/fouita/svelte-tw-tooltip
Tooltip works with svelte and tailwindcss
https://github.com/fouita/svelte-tw-tooltip
Last synced: 3 months ago
JSON representation
Tooltip works with svelte and tailwindcss
- Host: GitHub
- URL: https://github.com/fouita/svelte-tw-tooltip
- Owner: fouita
- License: mit
- Created: 2020-09-13T12:16:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-11-26T10:23:37.000Z (over 4 years ago)
- Last Synced: 2025-10-04T14:48:34.663Z (8 months ago)
- Language: Svelte
- Size: 5.86 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Svelte and Tailwind tooltip component
Easy to use Tooltip component for your svelte and tailwindcss projects
## Install
```bash
$npm i @fouita/tooltip -D
```
## Usage
Import the tooltip component and use it like the following
```html
import Tooltip from '@fouita/tooltip'
Element 1
```
### Positions
* top
* left
* right
* bottom
### Pointer
* start
* middle
* end
## Change Color
You can use `color` and `text_color` props to customize the color
```html
Element 1
```
## Hover action
To show the tooltip when hovering on an element you can use `on:mouseenter` and `on:mouseleave` events and toggle a show flag, like the following.
```html
import Tooltip from '@fouita/tooltip'
let show_elm = false
show_elm=true} on:mouseleave={() => show_elm=false}>
Hover
```
We can also customize the width of the tooltip by adding `w` attribute and use the scale used in tailwindcss.
## Custom content
To add custom content to a tooltip we can just add children tags and add some html
```html
import Tooltip from '@fouita/tooltip'
let show_elm = false
show_elm=!show_elm} >
Click
Custom Content!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos dolores excepturi placeat, eos et iste magnam illo voluptates veritatis exercitationem laborum, doloremque eius omnis, enim corrupti inventore rem vero assumenda.
Great!
```
## About
[Fouita : UI framework for svelte + tailwind components](https://fouita.com)