Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alcidesqueiroz/tooltippy
💬 Graceful CSS-only tooltips in under 1kb gzipped.
https://github.com/alcidesqueiroz/tooltippy
css css-only elegant fancy graceful hints modern multiple-themes tiny tooltips ui under-1kb-gzipped
Last synced: 3 months ago
JSON representation
💬 Graceful CSS-only tooltips in under 1kb gzipped.
- Host: GitHub
- URL: https://github.com/alcidesqueiroz/tooltippy
- Owner: alcidesqueiroz
- License: mit
- Created: 2018-03-10T02:26:22.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-12-07T00:00:08.000Z (about 4 years ago)
- Last Synced: 2024-04-24T02:41:50.334Z (10 months ago)
- Topics: css, css-only, elegant, fancy, graceful, hints, modern, multiple-themes, tiny, tooltips, ui, under-1kb-gzipped
- Language: Stylus
- Size: 521 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# tooltippy [](https://travis-ci.com/alcidesqueiroz/tooltippy)
> 💬 Graceful CSS-only tooltips in under 1kb gzipped.
## Install
With npm:
```
$ npm install tooltippy
```
With Yarn:
```
$ yarn add tooltippy
```
## Usage
1. Pick one of the available themes (you can see animated previews below);
2. Import your theme's stylesheet (from inside the `/dist` folder). Naturally, the recommended format for production is the minified one, but expanded and debug versions are available for each theme too;
3. In your target element, set the value of the `data-tooltippy` attribute to the text you want to show;
4. Add the `.tooltippy` class to your target element;
5. Define the position of your tooltip by using one of the existing direction classes (`.tooltippy--top`, `.tooltippy--left`, `.tooltippy--bottom` and `.tooltippy--right`);
6. **Optional step**: If you want, you can import the suggested font-face for the theme you have chosen. All theme stylesheets have font-stacks with similar web-safe font-families as fallback.
```html
```
- **IMPORTANT NOTICE 1**: In order to behave correctly, the tooltip target element *MUST* have its `position` set to `relative`, `absolute` or `fixed`.
- **IMPORTANT NOTICE 2**: [Replaced elements](https://stackoverflow.com/a/6949190) (like `img` or `input`) can't be used as target.
## Themes
### Hipster
- **Stylesheet:** `dist/tooltippy--hipster.min.css`
- **Suggested font-face:** [Raleway (weight 500)](https://fonts.googleapis.com/css?family=Raleway:500)
### Biz
- **Stylesheet:** `dist/tooltippy--biz.min.css`
- **Suggested font-face:** [Open Sans (weight 400)](https://fonts.googleapis.com/css?family=Open+Sans:400)
### Translucid
- **Stylesheet:** `dist/tooltippy--translucid.min.css`
- **Suggested font-face:** [Roboto Slab (weight 300)](https://fonts.googleapis.com/css?family=Roboto+Slab:300)
### High contrast
- **Stylesheet:** `dist/tooltippy--high-contrast.min.css`
- **Suggested font-face:** [Roboto (weight 500)](https://fonts.googleapis.com/css?family=Roboto:500)
## Author
Alcides Queiroz Aguiar
- Website: [www.alcidesqueiroz.com](https://www.alcidesqueiroz.com)
- Medium: [@alcidesqueiroz](https://medium.com/@alcidesqueiroz)
- Twitter: [alcidesqueiroz](https://twitter.com/alcidesqueiroz)
- Behance [alcidesqueiroz](https://behance.net/alcidesqueiroz)
- Stack Overflow: [http://is.gd/aqanso](http://stackoverflow.com/users/1295666/alcides-queiroz-aguiar)
- E-mail: alcidesqueiroz <at> gmail
## License
This code is free to use under the terms of the [MIT License](LICENSE.md).