Tooltips.css

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.

Installation

npm

npm i @zkreations/tooltips

cdn

<link href="https://cdn.jsdelivr.net/npm/@zkreations/tooltips@4/tooltips.min.css" rel="stylesheet"/>

How to use

Add the data-tts and aria-label attributes to an html element:

<span data-tts aria-label="Hello world!">Tooltip</span>

Positioning

If no orientation is specified, the default value (up) will be used:

<span data-tts="up" aria-label="Up">Top</span>
<span data-tts="left" aria-label="Left">Left</span>
<span data-tts="right" aria-label="Right">Right</span>
<span data-tts="down" aria-label="Down">Bottom</span>

The "up" and "down" orientations can be combined with "left" and "right":

<span data-tts="up-left" aria-label="Up Left">Up Left</span>
<span data-tts="up-right" aria-label="Up Right">Up Right</span>
<span data-tts="down-left" aria-label="Down Left">Down Left</span>
<span data-tts="down-right" aria-label="Down Right">Down Right</span>

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:

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

<span data-tts class="tts-slideIn" aria-label="Slide In">SlideIn</span>
<span data-tts class="tts-slideOut" aria-label="Slide Out">SlideOut</span>
<span data-tts class="tts-zoomIn" aria-label="Zoom In">ZoomIn</span>
<span data-tts class="tts-zoomOut" aria-label="Zoom Out">ZoomOut</span>

You can also define a default animation for all tooltips without using classes:

[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.

<span data-tts data-tts-visible aria-label="Programmatically Visible">Hello world</span>

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:

.tts-custom {
  --tts-background: #607D8B;
  --tts-border-radius: 1em;
  --tts-duration: .5s;
}

You can also set global styles for all tooltips:

[data-tts] {
  --tts-background: #607D8B;
  --tts-border-radius: 0px;
}

Notes

Tooltips do not work with self-closing tags, for example, <img/> or <input/>. To fix this, create a container and initiate the tooltip inside it:

<figure data-tts aria-label="I am an image">
  <img src="example.jpg"/>
</figure>

Supporting

If you want to help me keep this and more related projects always up to date, you can buy me a coffee ☕. I will be very grateful 👏.

License

tooltips.css is licensed under the MIT License

Tooltips

Install / Use

README