Create Custom Tooltips With Cool CSS3 Animations

Preview:

Description:

This is a tiny CSS library that allows you to easily create various kinds of animated tooltips with fade, flip, fold and zoom animations. Written entirely with CSS and CSS3.

It utilizes CSS3 transitions and animations for an approach that is more in-line with modern web development. This library does not reinvent the wheel; it simply aims to make customized tooltips easier to implement.

How to use it:

1. Import the stylesheet simple-tooltips.css into the document.

<link rel="stylesheet" href="./simple-tooltips.css">

2. Simply add the following CSS class to your div element together with the data-stt-title for the text inside the tooltip.

• Fade animations: stt-fade-right, stt-fade-left, stt-fade-up, stt-fade-down
• Zoom animations: stt-zoom-right, stt-zoom-left, stt-zoom-up, stt-zoom-down
• Fold animations: stt-fold-right, stt-fold-left, stt-fold-up, stt-fold-down
• Flip animations: stt-flip-right, stt-flip-left, stt-flip-up, stt-flip-down

<div class="stt-fade-right" data-stt-title="Fade right">
  Hover me
</div>
<div class="stt-fold-left" data-stt-title="Fold left">
  Hover me
</div>
<div class="stt-zoom-up" data-stt-title="Zoom up">
  Hover me
</div>
<div class="stt-flip-down" data-stt-title="Flip down">
  Hover me
</div>

3. Customize the tooltip by overriding the default CSS variables.

:root{
  --stt-bg-color: hsl(0, 0%, 20%);
  --stt-border-color: hsl(0, 0%, 25%);
  --stt-border-size: 1px;
  --stt-border-radius: 5px;
  --stt-text-color: white;
  --stt-text-size: 1rem; 
  --stt-offset: 10px; 
  --stt-transition-time-short: 0.1s;
  --stt-transition-time-long: 0.2s;
}