我正在尝试使用popper-js https://popper.js.org/index.html，但我很难阅读文档并让事情正常运行。我似乎无法理解arrow显示（指向引用元素的三角形）。
下面的代码缩小了我想要做的事情。弹出器显示并定位在内容加载上。但是如何配置 popper 呢？ （还有诸如主题偏移之类的事情）。
<!DOCTYPE html>
<html>
<head>
<style>
h1 { text-align:center;}
#info_box { border:1px solid black; background:ivory; padding: 2px 6px; }
</style>
</head>
<body>
<h1><span id="info_title">Lorem Ipsum passage</span></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div id="info_box">
<div class="arrow"></div>
The standard Lorem Ipsum passage, used since the 1500s.
</div>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
var info_title = document.getElementById('info_title');
var info_box = document.getElementById('info_box');
var popper = new Popper(info_title, info_box, {placement:"bottom", modifiers:{arrow:{element:'.arrow'}}});
});
</script>
</body>
</html>
一张图胜过千言万语。我实际上明白了：
我想要这个（原谅我的绘画技巧，我实际上希望箭头有匹配的颜色）：
Popper js 容器
<div id="tooltip" role="tooltip">
My tooltip
<div id="arrow" data-popper-arrow></div>
</div>
styles:
#tooltip[data-popper-placement^='top'] > #arrow {
bottom: -4px;
}
#tooltip[data-popper-placement^='bottom'] > #arrow {
top: -4px;
}
#tooltip[data-popper-placement^='left'] > #arrow {
right: -4px;
}
#tooltip[data-popper-placement^='right'] > #arrow {
left: -4px;
}
箭头样式
#arrow,
#arrow::before {
position: absolute;
width: 8px;
height: 8px;
z-index: -1;
}
#arrow::before {
content: '';
transform: rotate(45deg);
background: #333;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
