使用Popper.js创建页面上的气泡

但是， 自定义消息气泡或“弹出窗口”也非常有用。

每个人都知道工具提示 ，并且有数十种免费资源可以帮助您制作它们。

它们不仅限于悬停事件 ，因此它们可以一致地显示在页面上，并且可以解决其他用户行为。

它是一个免费的开源插件，托管在js.org官方网站上。

如果您希望在您的网站上创建这些语音气泡 弹出器，那么Popper.js是最佳选择。

有时，他们会为刚接触该界面的人员提供快速提示 ， 演练和入门建议 。

您会在许多界面复杂的网站中找到这些提示。

取而代之的是，您可以强制弹出器以动态定位 显示在 任何 位置 ， 任何大小 ， 任何颜色的 位置 。

使用Popper.js，您无需等待用户徘徊即可创建工具提示。

它具有多种定位功能 ，可让您根据屏幕位置自动翻转弹出器的位置。

查看Popper.js演示页面 ，了解我的意思。

使用此插件，您可以根据用户的滚动方向将其向上（或向下）翻转以将其强制返回视图 。

当用户向下滚动页面时，他们可能会丢失弹出窗口。

更不用说这个插件很漂亮并且可以完全扩展，如果您想添加自己的功能。

您可以完全控制边界，箭头位置，工具提示颜色等等。

如果您想查看所有源代码，可以在GitHub上免费获得。

虽然，最好的资源是Popper.js主页 ，其中包含丰富的演示和大量示例代码。

这将告诉您所需的脚本，如何设置自定义弹出窗口以及如何配置不同的视口选项。

首先，请查看文档页面以获取完整指南。

如果您想了解有关开发的更多信息，请查看由创建者Federico Zivolo撰写的此博客文章 。

翻译自: https://www.hongkiat.com/blog/popperjs-javascript-tip-bubbles/