如何在popper-js中显示箭头 [英] How to show the arrow in popper-js
问题描述
我正在尝试使用 popper-js ，但我很难阅读文档和使工作正常进行.我似乎无法显示箭头(三角形有点指向referenceElement).
I'm trying to use popper-js, but I have a hard time reading the documentation and to get things working. I can't seem to get the arrow to show (the triangle thingy pointing to the referenceElement).
下面的代码将范围缩小到我要尝试执行的操作.显示弹出窗口，并将其放置在内容加载上.但是如何配置波普尔呢? (还有像对象偏移的东西.)
The code below is narrowed down to what I'm trying to do. The popper is shown and positioned on content load. But how to configure the popper? (And also things like the offset to the subject).
<!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>
一张图像说出一千多个单词.我实际上得到了:
An image says more than a thousand words. I actually get this:
我想要这个(原谅我的绘画技能，我实际上希望箭头具有匹配的颜色):
And I want this (forgive my drawing skills, I actually want the arrow to have a matching color):
推荐答案
我进行了一些更改，但希望您能理解
I made some changes, but i hope you will understand
https://codepen.io/anfield343/pen/xJdBzp
可能的主要问题是:您使用的是<div>而不是<span>
Propbably, the main problem was: you are using <div> instead of <span>
这篇关于如何在popper-js中显示箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
