How to show the arrow in popper-js

问题

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):

回答1:

I made some changes, but i hope you will understand

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

Propbably, the main problem was: you are using <div> instead of <span>

来源：https://stackoverflow.com/questions/51495427/how-to-show-the-arrow-in-popper-js

标签

javascript

popper.js