Create Custom Tooltips With Cool CSS3 Animations

Author: WouterKuijt
Views Total: 0 views
Official Page: Go to website
Last Update: June 1, 2022
License: MIT

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.

See also  Windows 10 Style Switches In Pure CSS / CSS3

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;
}

Leave a Reply

Your email address will not be published. Required fields are marked *