Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zkreations/tooltips
A lightweight and powerful solution that doesn't rely on JavaScript and compresses to just 0.7kb (Brotli). Easy to customize and implement, with no impact on performance.
https://github.com/zkreations/tooltips
css nojs sass scss tooltip
Last synced: about 18 hours ago
JSON representation
A lightweight and powerful solution that doesn't rely on JavaScript and compresses to just 0.7kb (Brotli). Easy to customize and implement, with no impact on performance.
- Host: GitHub
- URL: https://github.com/zkreations/tooltips
- Owner: zkreations
- License: mit
- Created: 2016-06-18T01:44:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-05T23:36:42.000Z (7 months ago)
- Last Synced: 2024-04-06T00:28:21.011Z (7 months ago)
- Topics: css, nojs, sass, scss, tooltip
- Language: SCSS
- Homepage: https://zkreations.github.io/tooltips/
- Size: 330 KB
- Stars: 32
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Tooltips.css
  
A lightweight and powerful solution that doesn't rely on JavaScript and compresses to just 0.7kb [Brotli](https://www.multiutil.com/text-to-brotli-compress/). Easy to customize and implement, with no impact on performance.
## Installation
### npm
```
npm i @zkreations/tooltips
```
### cdn
```html
```
## How to use
Add the `data-tts` and `aria-label` attributes to an html element:
```html
Tooltip
```
### Positioning
If no orientation is specified, the default value (up) will be used:
```html
Top
Left
Right
Bottom
```
The "**up**" and "**down**" orientations can be combined with "**left**" and "**right**":
```html
Up Left
Up Right
Down Left
Down Right
```
### Animations
Animations can be created using **CSS variables** that affect the initial state:
| Variable | Default | Description
| ----------------------- | -------- | ------------
| `--tts-start-scale` | `1` | Initial scale
| `--tts-end-scale` | `1` | Final scale
| `--tts-start-translate` | `0px` | Initial position
| `--tts-end-translate` | `0px` | Final position
With these variables, you can create animations, for example:
```css
.tts-slideIn {
--tts-start-translate: -1rem;
}
.tts-slideOut {
--tts-start-translate: 1rem;
}
.tts-zoomIn {
--tts-start-scale: .9;
}
.tts-zoomOut {
--tts-start-scale: 1.1;
}
```
Now just add the classes to your animations:
```html
ZoomIn
ZoomOut
```
You can also define a **default animation** for all tooltips without using classes:
```css
[data-tts] {
--tts-start-translate: 1rem;
--tts-start-scale: .75;
}
```
### Show programmable tooltip
Add the `data-tts-visible` class to display the tooltip at any time without the need for user interaction with the element. You can easily add this attribute using JavaScript.
```html
Hello world
```
## Customize
Define new values for the tooltip's CSS variables to change its appearance. The available design variables are:
| Variable | Default | Description
| --------------------- | -------------------- | -------------
| `--tts-background` | rgb(0 0 0 / 90%) | Background color
| `--tts-arrow` | 6px | Arrow size
| `--tts-arrow-offset` | 6px | Arrow offset (only for combined orientation)
| `--tts-duration` | 0.3s | Animation duration
| `--tts-font-size` | 14px | Font size
| `--tts-font-family` | Roboto, sans-serif | Font family
| `--tts-color` | #fff | Font color
| `--tts-padding` | 0.5em 0.75em | Padding
| `--tts-border-radius` | 0.25em | Border radius
Variables allow you to create new themes that you can apply with your own classes:
```css
.tts-custom {
--tts-background: #607D8B;
--tts-border-radius: 1em;
--tts-duration: .5s;
}
```
You can also set **global styles** for all tooltips:
```css
[data-tts] {
--tts-background: #607D8B;
--tts-border-radius: 0px;
}
```
## Notes
Tooltips **do not work with self-closing tags**, for example, `![]()
` or ``. To fix this, create a container and initiate the tooltip inside it:
```html
```
## Supporting
If you want to help me keep this and more related projects always up to date, you can [buy me a coffee](https://ko-fi.com/zkreations) ☕. I will be very grateful 👏.
## License
**tooltips.css** is licensed under the MIT License