如何在 popper-js 中显示箭头答案

【问题标题】：How to show the arrow in popper-js如何在 popper-js 中显示箭头
【发布时间】：2018-07-24 09:43:43
【问题描述】：

我正在尝试使用popper-js，但我很难阅读文档并让工作正常进行。我似乎无法显示箭头（指向 referenceElement 的三角形）。

下面的代码被缩小到我想要做的事情。 popper 显示并定位在内容加载上。但是如何配置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。在你的代码中不是。 var popper = new Popper()
好的，但是怎么做？只有类级别的文档...
对了，我没听懂。但是，行为没有改变......
我只是尝试了一些不同的东西，这是我最后尝试的。我现在认为它应该类似于{modifiers:{arrow:{element:'.arrow'}}}，但这也不起作用。

标签： javascript popper.js

【解决方案1】：

Popper js 容器

<div id="tooltip" role="tooltip">
  My tooltip
  <div id="arrow" data-popper-arrow></div>
</div>

风格：

#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;
}

【讨论】：

【解决方案2】：

你必须为.arrow添加样式

document.addEventListener('DOMContentLoaded', function () {
    var info_title = document.getElementById('info_title');
    var info_box = document.getElementById('info_box');
    info_box.style.display = 'none';
    var popper = new Popper(info_title, info_box, { placement: "bottom", modifiers: { arrow: { element: '.arrow' } } });

    info_title.addEventListener('mouseenter', () => {
        info_box.style.display = null;
        popper.enableEventListeners();
        popper.scheduleUpdate();
    });
    info_title.addEventListener('mouseleave', () => {
        info_box.style.display = 'none';
        popper.disableEventListeners();
    });
});

h1 {
    text-align: center;
}

#info_box {
    border: 1px solid black;
    background: ivory;
    padding: 2px 6px;
}

.arrow {
    position: absolute;
    width: 0.75em;
    height: 0.75em;
    overflow: hidden;
}

.arrow::before {
    content: '';
    position: absolute;
    width: 0.75em;
    height: 0.75em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background: ivory;
    border: 1px solid black;
}

#info_box[x-placement^="bottom"] .arrow {
    top: -0.75em;
    width: 1.5em;
}

#info_box[x-placement^="bottom"] .arrow::before {
    top: 100%;
}

#info_box[x-placement^="top"] .arrow {
    bottom: -0.75em;
    width: 1.5em;
}

#info_box[x-placement^="top"] .arrow::before {
    top: 0;
}

#info_box[x-placement^="left"] .arrow {
    right: -0.75em;
    height: 1.5em;
}

#info_box[x-placement^="left"] .arrow::before {
    left: 0;
}

#info_box[x-placement^="right"] .arrow {
    left: -0.75em;
    height: 1.5em;
}

#info_box[x-placement^="right"] .arrow::before {
    left: 100%;
}

<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<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>

【讨论】：