Pure CSS Tooltips Without JavaScript – Balloon.css

Balloon.css is very simple and easy to use pure CSS library for tooltips. You can create simple tooltips elements for your project without any JavaScript. You can adjust various types of position and length of the tooltips that predefined within the CSS.

Features:

• It can be installed with NPM.
• Supports to change the position of the tooltips.
• Can be modified the length of the tooltips.
• Animation can be disabled if you want to disable it.

Install with NPM

$ npm i balloon-css --save

How to use it:

1. Include the CSS balloon.min.css in the header of the page.

<link rel="stylesheet" href="path/to/balloon.min.css">

2. Add the basic HTML to the page and we’re ready to go.

Positioning: It can be positioned through the attribute data-balloon-pos with one of the values: up, down, left, right, up-left, up-right, down-left, down-right

<button aria-label="Whats up!" data-balloon-pos="up">Hover me!</button>

Length: You can change it’s length through the attribute data-balloon-length with one of the values: small, medium, large, xlarge, fit

<button data-balloon-length="medium" aria-label="Add Text Here" data-balloon-pos="up">I'm a medium tooltip.</button>

Disabling animation: You can disable the animation of tooltips with the attribute data-balloon-blunt.

<button data-balloon-blunt aria-label="No animation!" data-balloon-pos="up">No animation!</button>

Customizing Tooltips: Tooltips can be customized with the help of css --balloon-color, --balloon-font-size and --balloon-move

<button aria-label="I am red!" class="tooltip-red">I am red!</button>

.tooltip-red {
    --balloon-color: red;
    --balloon-font-size: 20px;
    --balloon-move: 30px;
  }

Options: