介绍
npm 包 justin-info-bubble 是一款前端常用的信息提示工具，它可以在页面中创建一个漂亮的气泡框，用来展示一些重要的信息或者说明。这个库的优点是使用简单，支持灵活的自定义样式，可以满足各种不同的需求。
安装
使用 npm 或者 yarn 进行安装：
npm install justin-info-bubble
或者
yarn add justin-info-bubble
使用
在使用 justin-info-bubble 之前，需要先引入库，可以使用 ES6 module 或者 CommonJS 的方式进行引用：
// ES6 module
import InfoBubble from 'justin-info-bubble';
// CommonJS
const InfoBubble = require('justin-info-bubble');引入之后，就可以创建一个新的 InfoBubble 实例：
const bubble = new InfoBubble({
content: "Hello, world!",
padding: 10,
borderRadius: 5,
backgroundColor: '#FF0000'
});这个示例创建了一个内容为 "Hello, world!" 的气泡框，设定了一些自定义样式。
接下来，可以将这个气泡框添加到页面中去：
bubble.addTo(document.body);
这样就可以在页面中创建一个漂亮的气泡框了。更多详细的使用方法，请参考官方文档。
示例
下面是一个完整的示例代码，演示了如何使用 justin-info-bubble 创建一个基本的气泡框，并设定自定义样式。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -------------
-------
---- -
------ ------
------- -----
------------ -----
----------- -------
----------------- --------
------ --------
------- -----
-------------- ----
------- ----- -----
------- --------
-
--------
-------
------
---- ----------------- --------
------- --------------------------------------------------------------------------------
--------
----- --- - -------------------------------
----- ------ - --- ------------
-------- ------- --------
-------- ---
------------- --
---------------- ----------
---------- ---
----------- ---------
---
----------------------------- ---------- -
----------------------------
-------------------
---
---------
-------
-------在这个示例中，我们创建了一个简单的按钮，当点击按钮时，就会在页面中创建一个气泡框，用来展示 "Hello, world!" 的内容。这个气泡框设定了 padding、borderRadius、backgroundColor、arrowSize 和 arrowColor 等一系列自定义样式。
深入学习
如果你想深入了解 justin-info-bubble 的实现原理，可以阅读官方的源代码，它使用 ES6 class 和 canvas 技术来实现。
此外，只有深入理解 CSS3 的弹性盒模型，才能更好地使用 justin-info-bubble 这样的前端工具。如果你对 CSS3 弹性盒模型还不熟悉，可以参考这篇教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef84c49986ca68d86a2