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

每个人都知道工具提示 ，并且有数十种免费资源可帮助您制作它们。 但是， 自定义消息气泡或“弹出窗口”也非常有用。

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

如果您想在您的网站上创建这些语音气泡 弹出器，那么Popper.js是最佳选择。 它是一个免费的开源插件，托管在js.org官方网站上。

您会在许多界面复杂的网站中找到这些提示。 有时，他们会为刚接触该界面的人员提供快速提示 ， 演练和入门建议 。

使用Popper.js，您无需等待用户徘徊即可创建工具提示。 取而代之的是，您可以强制弹出器以动态定位 显示在 任何 位置 ， 任何大小 ， 任何颜色的 位置 。

查看Popper.js演示页面 ，了解我的意思。 它具有多种定位功能 ，可让您根据屏幕位置自动翻转弹出器的位置。

当用户向下滚动页面时，他们可能会丢失弹出气泡。 使用此插件，您可以根据用户的滚动方向将其向上（或向下）翻转以将其强制返回视图 。

您可以完全控制边界，箭头位置，工具提示颜色等等。 更不用说这个插件很漂亮并且可以完全扩展，如果您想添加自己的功能。

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

首先，请查看文档页面以获取完整指南。 这将告诉您所需的脚本，如何设置自定义弹出窗口以及如何配置不同的视口选项。 虽然，最好的资源是Popper.js主页 ，其中包含丰富的演示和大量示例代码。

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

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