学习Popper.js | Tooltip.js教程与实例在这篇博文中，我们将学习新的库--popperjs|toolt

在这篇博文中，我们将学习新的库--popperjs|tooltipjs教程与实例。这包括这个框架的各种选项和功能。

PopperJS是一个开源的javascript框架，用于在web应用程序上显示/隐藏/重用漂亮的弹出窗口和工具提示。ToolTipjs也是一个用于管理HTML元素的漂亮工具提示的框架。使用这两个库，我们可以拥有漂亮的工具提示、下拉菜单和弹出窗口。这也是在不修改DOM上下文的情况下定位元素。

特点和优势

减少开发时间，改善用户体验
轻松、简单和强大的API
支持桌面、手机和平板电脑的所有浏览器
可以与基于JQuery/Angular/Vue/React的应用程序集成
这段代码是用ES2015编写的。
它没有像jQuery那样的依赖性
它是可定制的

安装和设置

PopperJS/tooltipjs库可以通过以下方式集成到任何应用程序中

包含从Github下载的本地popperjs库
包括CDN URL
安装npm和yarn软件包管理器

包括从Github下载的本地popperjs库

最新的popper.js/tooltipjs版本可以从GitHub下载。将js代码复制到你的项目中，并导入指向你本地js位置的脚本URL

<script src="location to popper.js file "></script>
<script src="location to tooltip.js file "></script>

包括CDN URL

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltip.js/1.3.0/tooltip.min.js"></script>

npm和yarn包管理器的安装它提供这个库作为npm/yarn包管理器。你也可以使用npm/yarn安装，如下所示

npm install popper.js --save
npm install tooltip.js --save

或

yarn add  popper.js
yarn add  tooltip.js

这样就把这两个包都安装到你的项目中。

在下面这个例子中，显示了按钮，在悬停按钮时，显示了工具提示。这解释了如何使用javascript来显示工具提示。我们还可以与bootstrap和JQuery代码集成。


<!DOCTYPE html>
<html>
<head>
<title>Popperjs/Tooltipjs Tutorials with examples</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltip.js/1.3.0/umd/tooltip.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
  var trigger = document.getElementsByClassName("mybutton")[0];
  var instance = new Tooltip(trigger,{
    title: trigger.getAttribute('data-tooltip'),
    trigger: "hover",
  });
});

</script>

</head>
<body>
<div align="center">
<button class="button mybutton" data-tooltip="Please Click Me"> Click Here</button>
</div>
</body>

</html>

输出是

Learn Popperjs tooltipjs Tutorials Examples

全局对象

Popper是一个全局对象，它接受对Html元素和popper对象的引用，选项Options包含以下内容Placements这个库用于定位任何元素。以下是有效的值自动，顶部，右侧，底部，左侧我们也可以用各种变化来应用每个位置 -start,-end修改器这是用来改变实际的弹出功能有各种修改器，如shift, offset, preventOverflow, keeptogether, arrow, flip, inner, hide,computeStyle, applyStyle 回调有各种回调如下 OnCreate - 这将在弹出窗口被创建时调用 onUpdate - 这将在弹出窗口被更新时调用 Popper 示例用法以下是Popper对象的用法和所有选项

var popper = new Popper(reference to HTML element,popup html element,{
                        placement: 'top',
                        onCreate: function(data){
                                console.log(data);
                        },
                        modifiers: {
                                flip: {
                                        behavior: ['left']
                                },
                                offset: {
                                        enabled: true,
                                        offset: '0,20'
                                }
                        }
                });
        });