https://github.com/peiche/tippy.css
Pure CSS tooltips.
https://github.com/peiche/tippy.css
css css-tooltips tooltips
Last synced: 5 months ago
JSON representation
Pure CSS tooltips.
- Host: GitHub
- URL: https://github.com/peiche/tippy.css
- Owner: peiche
- License: mit
- Created: 2016-03-16T18:15:05.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-02-24T20:49:51.000Z (over 9 years ago)
- Last Synced: 2024-08-09T22:36:29.634Z (almost 2 years ago)
- Topics: css, css-tooltips, tooltips
- Language: CSS
- Homepage: http://peiche.github.io/tippy.css
- Size: 59.6 KB
- Stars: 14
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tippy.css
## Pure CSS tooltips.
Create tooltips with ease, without JavaScript.
### How to use
First, include the stylesheet at the top of your page.
```html
```
For the simplest case, add the property `data-tippy` to an element with your tooltip text as the value. You can do this to links, spans, divs, and even buttons. (Well, in most browsers. We'll get to that.)
```html
...
...
...
...
```
### Tooltip positions
By default, tooltips appear below the element to which they belong. By including the `data-tippy-pos` property, you can control how they appear. There are four potential values: "up", "down", "left", and "right".
```html
```
### Special animations
The tooltips don't have much by way of default animation. They fade in, but that's it. There are two optional animation types, however. Include the `data-tippy-animate` property and one of two values, "slide" or "bubble".
### Browser support
Tippy.css has been tested in Internet Explorer 9-11 and the latest versions of Chrome, Firefox, Edge (yay Windows 10 Insider program), Vivaldi (my browser of choice), and Safari.
### Known issues
* Tooltips are created by using the `::before` and `::after` pseudo-elements, so tooltips on any element that doesn't have those, like images or input fields, won't appear.
You can work around this by wrapping the element in a span or a div, though, like this:
```html
```
* If your stylesheet is using pseudo-elements on certain elements, you will run into conflicts. This will result in weird behavior or non-working tooltips.
* HTML inside tooltips will not work, so don't even try.
* Tooltips don't work on `` elements in Internet Explorer. I don't know why. :/
* The bubble animation uses the `clip-path` property, and (as of this writing) only works in Chrome, Vivaldi, and Safari.
* Tooltips on links that underline on hover get underlined in Edge.
* Tooltips on buttons get included in the focus outline.
You can override this behavior with this code:
```css
button[data-tippy]:focus {
outline: none;
}
```
I won't include this code in the stylesheet, however. Removing the button's outline will remove its accessibility, so think carefully before you implement this.
Learn more at [www.outlinenone.com](http://www.outlinenone.com).
### License
Tippy.css has been released under the [MIT license](LICENSE).