原文：https://blog.csdn.net/jhzhahuaiyu/article/details/90213582
Popper.js是一款功能強大的JS定位引擎。最近在寫tooltip彈窗時，需要用到提示框定位的問題，然后度娘推薦我使用popper.js庫，查看了iview庫和element庫的源碼，發現定位都是用的這個玩意兒。既然大佬們都在用這個，我也去Popper.js官網瞅了下，沒有中文文檔，不得不吐槽一下。然后就是demo也少的可憐，而且網上的教程也比較少。於是就手敲了一遍這個庫的使用屬性及方法，相關的demo在我的github上，有興趣可以自行下載。
1、基本使用方法
var popperInstance = new Popper(reference,popper,options);
Popper構造函數接收三個參數：
reference是要定位到的HTMLElement節點，或者是一個提供定位參數的Object（不支持IE10+），所以還是使用dom節點吧
popper是要被定位的HTMLElement節點
reference和popper元素都是構造函數必須的，本文后面如不做解釋則默認就是指這兩個對象
默認的定位方式可能就是把popper元素定位到reference元素下方附近。
Popper.js提供其他定位方式和方法，使用options對象參數來配置
2、Popper實例屬性（popperInstance ）
經Popper類實例化的對象，擁有以下方法
update()，根據reference和參數重新計算定位popper元素
destroy()，銷毀該實例，並刪除附加在popper上的定位樣式
enableEventListeners()，默認的，popper.js會在window觸發resize和scroll時，重新計算定位popper元素，可以配置不啟用該功能，也可以使用本方法啟用該功能
disableEventListeners()，此方法與enableEventListeners()功能相反
scheduleUpdate()，異步更新，當相關ui更新完成后執行更新
3、Popper參數配置（options）
placement，String類型，默認為bottom，即popper元素定位在reference下方附近
top
left
right
bottom
上面的參數均可添加start和end后綴，效果如下圖（附top-start代碼，其他類似）：
var query = document.querySelector.bind(document),
box = query('.box');
/*
* placement: top-start
*/
var topStart = query('.top-start');
new Popper(box,topStart,{
placement: 'top-start',
modifiers: {
offset: {
offset: '0, 55px'
}
}
});
positionFixed，Boolean類型，默認為false
true：使用position:fiexed來進行定位
false: 使用position:absoluted來進行定位
var box = document.querySelector('.box'),
popper = document.querySelector('.popper'),
pIntance = new Popper(box,popper,{
placement: 'top',
positionFixed: true
});
eventsEnabled，Boolean類型，默認為true
true，為window綁定resize和scroll監聽器，觸發時更新popper定位
false，不啟用該功能
removeOnDestroy，Boolean類型，默認為false
true，調用destroy方法時，順便移除popper元素
false，調用destroy方法時，僅刪除popper元素的定位樣式
onCreate，Function類型，鈎子函數，popper定位完成后觸發
回調參數是一個Object，包含popper的所有參數、計算屬性以及樣式，這里不一一列舉，可去官網查看詳情
onUpdate，Function類型，鈎子函數，調用update方法更新后調用，參數同onCreate
modifiers，Object類型，配置popper定位的相關修飾參數
modifiers配置下面的屬性都是Object對象，並且都包含以下屬性：
order，Number類型，用於計算定位時的先后執行順序，數字越大越先執行
enabled，Boolean類型，是否啟用該功能，默認為true
fn，Function類型，update時調用，第一個參數和onCreate及onDestroy一樣，第二個為modifiers配置對象（慎用，因為每次更新時，每個的modifiers下的fn都將被調用）
除了上面的三個屬性，不同的修飾符可能還有額為的屬性
a、shift，是否使用placement的后綴屬性，例如：如果不啟用，則placement:start-end會被當做start來處理
b、offset，在計算popper元素的定位后，在該位置進行偏移
包含額外的一個屬性：
offset： String或Number類型，使用示例：
/*
* offset 參數支持數據單位：
*
* px，像素
* %或%r，相對於reference的百分比距離
* %p，相對於popper的百分比距離
* vw，vh；相對於視圖窗口的百分比距離
* number；數據默認是px單位
*
* 設置主軸方向的offset請使用單個值，設置兩個方向的offset請使用“,”（逗號）隔開，空格分隔已被廢棄，慎用！
* 如果placement設置為top或bottom，則主軸為水平方向
* 如果placement設置為left或right，則主軸為垂直方向
*
*
* 以上數據格式可組合加減計算使用（暫不支持乘法運算），例如：
* '10% + 10,10 - 5vh'
*/
var bottom1 = query('.bottom1');
new Popper(box,bottom1,{
placement: 'bottom',
modifiers: {
offset: {
offset: '40,58px'
}
}
});
c、preventOverflow,防止popper元素定位到邊界外，如果popper元素右邊在邊界外，則他會被定位到reference元素左邊，上下同理。設置為false將不作處理，按照其他設置進行定位。
包含額外屬性：
priority：Array類型，當處在邊界時，優先處理哪個方向，默認['left','right','top','bottom']
padding：Number類型，默認為5，popper元素距離邊界的距離小於該值則啟用本功能重新定位
boundariesElement：String|HTMLElement類型，邊界元素節點或者邊界元素選擇器
var box = document.querySelector('.box'),
popper = document.querySelector('.popper'),
pIntance = new Popper(box,popper,{
placement: 'top',
modifiers: {
preventOverflow: {
priority: ['top']
}
}
});
d、flip：當reference元素將超出邊界時，定位popper元素
額外屬性：
behavior：String|Array類型，可以是flip（對稱定位，比如說右側被遮擋，則定位到左側）,closewise（順時針定位）,counterclockwise（逆時針定位）或者室友placement值組成的數組，用來設置popper元素的定位。
padding：Number類型，默認為5，reference元素距離邊界的距離小於該值則啟用本功能重新定位
boundariesElement：String|HTMLElement類型，邊界元素或者邊界元素的選擇器
var box = document.querySelector('.box'),
popper = document.querySelector('.popper'),
pIntance = new Popper(box,popper,{
placement: 'left',
modifiers: {
flip: {
behavior: ['left','bottom','top'],
padding: 10
}
}
});
e、inner：是否設置popper元素在reference內部，默認是不啟用本項
var box = document.querySelector('.box'),
popper = document.querySelector('.popper'),
pIntance = new Popper(box,popper,{
placement: 'top',
modifiers: {
inner: {
enabled: true
}
}
});
f、hide：當reference元素完全超出邊界時，為popper元素添加x-out-of-boundaries屬性，用於css選擇器。默認啟用該功能
var box = document.querySelector('.box'),
popper = document.querySelector('.popper'),
pIntance = new Popper(box,popper,{
placement: 'right',
modifiers: {
preventOverflow: {
boundariesElement: document.body,
padding: 10,
priority: []
},
hide: {
enabled: true
}
}
});
g、keepTogether：把reference和popper元素貼合在一起，特別是在制定了arrow修飾符的時候（個人感覺並不好用），就不做展示了
h、arrow：指定arrow並定位在popper元素和reference元素之間，配合keepTogether修飾符使用（個人感覺並不好用），不做展示
i、computeStyle：配置計算樣式屬性
gpuAcceleration：Boolean類型，默認為true，是否開啟css3的transform來進行定位
x：String類型，可以為top或bottom，默認為bottom，使用相反的值來進行定位,例如設置為bottom，則定位時使用top進行定位（top和bottom不能同時有效）
y：String類型，可以為right或left，默認為left，使用相反的值來進行定位,
var box = document.querySelector('.box'),
popper = document.querySelector('.popper'),
pIntance = new Popper(box,popper,{
placement: 'top',
modifiers: {
computeStyle: {
gpuAcceleration: false,
x: 'bottom',
y: 'left'
}
}
});
j、applyStyle,應用計算的屬性到popper元素上，內部操作，感覺沒啥用。
var box = document.querySelector('.box'),
popper = document.querySelector('.popper'),
pIntance = new Popper(box,popper,{
placement: 'top',
modifiers: {
computeStyle: {
gpuAcceleration: false
},
arrow: {
element: '.arrow'
},
positionArrow: {//自定義popper定位
order: 860,
enabled: true,
fn: (data) => {
var arrowWidth = 8;
var arrowHeight = 8;
var popper = data.popper;
console.log(data);
data.styles = Object.assign(data.styles,{
opacity: 0.8,
top: popper.top
});
data.arrowStyles = Object.assign(
data.arrowStyles,
{
position: 'absolute',
left: (popper.width - arrowWidth) / 2,
bottom: '-' + arrowHeight
}
);
return data;
}
}
}
});
到這里，Popper.js的全部屬性都用了一遍，大概可以開始寫我們的tooltip組件了。
參考文檔：Popper.js官方文檔
————————————————
版權聲明：本文為CSDN博主「站在原型鏈頂端的男人」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/jhzhahuaiyu/java/article/details/90213582