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.
NPM.$ npm i balloon-css --save1. 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;
}| Option | Attribute |
|---|---|
| Positioning: | |
| up | data-balloon-pos="up" |
| left | data-balloon-pos="left" |
| right | data-balloon-pos="right" |
| down | data-balloon-pos="down" |
| up-left | data-balloon-pos="up-left" |
| up-right | data-balloon-pos="up-right" |
| down-left | data-balloon-pos="down-left" |
| down-right | data-balloon-pos="down-right" |
| Length: | |
| small | data-balloon-length="small" |
| medium | data-balloon-length="medium" |
| large | data-balloon-length="large" |
| xlarge | data-balloon-length="xlarge" |
| fit | data-balloon-length="fit" |
| Disabling animation | data-balloon-blunt |
<button aria-label="Whats up!" data-balloon-pos="up">Hover me!</button><button aria-label="Whats up!" data-balloon-pos="left">Hover me!</button><button aria-label="Whats up!" data-balloon-pos="right">Hover me!</button><button aria-label="Whats up!" data-balloon-pos="down">Hover me!</button><button aria-label="Whats up!" data-balloon-pos="up-left">Hover me!</button><button aria-label="Whats up!" data-balloon-pos="up-right">Hover me!</button><button aria-label="Whats up!" data-balloon-pos="down-left">Hover me!</button><button aria-label="Whats up!" data-balloon-pos="down-right">Hover me!</button><button data-balloon-length="small" aria-label="Hi." data-balloon-pos="up">Hover me!</button><button data-balloon-length="medium" aria-label="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done." data-balloon-pos="up">I'm a medium tooltip.</button><button data-balloon-length="large" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a large tooltip</button><button data-balloon-length="xlarge" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a Xlarge tooltip</button><button data-balloon-length="fit" aria-label="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">My width will fit to element</button><button data-balloon-blunt aria-label="No animation!" data-balloon-pos="up">No animation!</button><button aria-label="I am red!" class="tooltip-red" data-balloon-pos="up">I am red!</button><button aria-label="I have big text!" class="tooltip-big-text" data-balloon-pos="up">I have big text!</button><button aria-label="I move a lot!" class="tooltip-slide" data-balloon-pos="up">I move a lot!</button>/* Add this to your CSS */
.tooltip-red {
--balloon-color: red;
}
.tooltip-big-text {
--balloon-font-size: 20px;
}
.tooltip-slide {
--balloon-move: 30px;
}<button aria-label="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button><button aria-label="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button><button class="font-awesome" aria-label="Font Awesome:     " data-balloon-pos="up">Hover me!</button>** You will need to add font-awesome css for this.