Shulou(Shulou.com)06/03 Report--

This article introduces the use of css prompt plug-in balloon, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Balloon.css is a simple and practical tooltips tooltip effect library made by practical pure CSS3. The tooltips can display prompt boxes in different locations through simple settings, automatically set the size of the prompt box according to the amount of content, and it can also display unicode coding and FontAwesome font icons.

How to use Balloon.css

To use this tooltip effect, you need to introduce a balloon.css or balloon.min.css file into the page.

Location of tooltips

The location of different tooltips can be located by setting the data-balloon-pos property. Available values are: up,down,left or right.

Hoverme!

Hoverme!

Hoverme!

Hoverme!

Length of tooltips

By default, tooltips is always displayed on one line, and you can modify the default behavior through the data-balloon-length property. Available values are: small,medium,large or fit.

Balloon.css installation

Npminstallballoon-css

Use the property of data-balloon-pos with one of the values: up,down,left,right,up-left,up-right,down-left or down-right:

Hoverme!

Hoverme!

Hoverme!

Hoverme!

Hoverme!

Hoverme!

Hoverme!

Hoverme!

In short, Balloon.css pure css3 simple and practical tooltips tooltip library, Balloon.css allows you to add hints to elements without the help of JavaScript, and only a few lines of css code.

On the use of css prompt plug-in balloon to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.