Os. Na Stoku 27a / 17
31-705 Kraków, POLAND
PHONE: +48 666 977 944
Here are some features of Balloon.css:
Positioning: You can use the
data-balloon-pos attribute to position your tooltips. Available values are:
Length: By default, tooltips will always remain single-line no matter their length. You can change this behavior by using the
data-balloon-length attribute with one of the values:
Disabling Animation: If for some reason you do not want animations in your tooltips, you can use the
Programmatically Showing Tooltips: If you want to show tooltips even when user interaction isn't happening, you can simply use the
Customizing Tooltips: Balloon.css exposes three CSS variables to make it easier to customize tooltips:
--balloon-move. This way you can use custom CSS to create your own tooltip styles.
Glyphs and Icon Fonts: You can also add any HTML special character to your tooltips, or even use third-party Icon fonts.
To use Balloon.css, you can import the CSS using a CDN, download it from GitHub and load it locally, or if you're using npm, simply install it with
npm i balloon-css --save and then import it in your JS file.
However, keep in mind that Balloon.css makes use of pseudo-elements, so self-closing elements like
<hr> will not render tooltips. Also, if pseudo-elements are already in use on an element, the tooltip will conflict with them, resulting in potential bugs.