Question

我正在尝试使用popper-js，但是在阅读文档和使事情正常运行方面我很难。我似乎无法得到箭头来显示（三角形有点指向referenceElement）。

下面的代码将范围缩小到我要尝试执行的操作。显示弹出窗口，并将其放置在内容加载上。但是如何配置波普尔呢？（还有像对象偏移的东西。）

<!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>

一张图像说出一千多个单词。我实际上得到了：

我想要这个（原谅我的绘画技能，我实际上希望箭头具有匹配的颜色）：

Answer 1

我做了一些更改，但我希望你能理解

https://codepen.io/anfield343/pen/xJdBzp

可能的主要问题是：您使用的是<div>而不是<span>

Answer 2

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

Answer 3

您必须为.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>

如何在popper-js中显示箭头

3 个答案: