Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS. By default, tooltips will always remain single-line no matter their length. You can change this behavior by using the attribute data-balloon-length with one of the values, small, medium, large or fit. If for some reason you do not want animations in your tooltips, you can use the data-balloon-blunt attribute for that. If you want to show tooltips even when user interaction isn't happening, you can simply use the data-balloon-visible attribute. The attribute data-balloon-visible can be easily added via JavaScript (e.g. .setAttribute()), enabling you to show tooltips whenever needed. Balloon.css exposes three CSS variables to make it easier to customize tooltips. his way you can use custom CSS to make your own tooltip styles.

Features

  • Balloon.css lets you add tooltips to elements without JavaScript
  • Just requires a few lines of CSS
  • Make your own tooltip styles
  • You can combine classes to achieve multiple customization
  • You can also add any HTML special character to your tooltips
  • Tooltips will always remain single-line no matter their length

Project Samples

Project Activity

See All Activity >

License

MIT License

Follow Balloon.css

Balloon.css Web Site

You Might Also Like
Our Free Plans just got better! | Auth0 by Okta Icon
Our Free Plans just got better! | Auth0 by Okta

With up to 25k MAUs and unlimited Okta connections, our Free Plan lets you focus on what you do best—building great apps.

You asked, we delivered! Auth0 is excited to expand our Free and Paid plans to include more options so you can focus on building, deploying, and scaling applications without having to worry about your secuirty. Auth0 now, thank yourself later.
Try free now
Rate This Project
Login To Rate This Project

User Reviews

Be the first to post a review of Balloon.css!

Additional Project Details

Registered

2021-11-10