title: How to show the arrow in popper-js
body: <p>I'm trying to use <a href="https://popper.js.org/index.html" rel="nofollow noreferrer">popper-js</a>, but I have a hard time reading the documentation and to get things working. I can't seem to get the <strong>arrow</strong> to show (the triangle thingy pointing to the referenceElement).</p>
  
  <p>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).</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
        h1 { text-align:center;}
        #info_box { border:1px solid black; background:ivory; padding: 2px 6px; }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;&lt;span id="info_title"&gt;Lorem Ipsum passage&lt;/span&gt;&lt;/h1&gt;
      &lt;p&gt;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.&lt;/p&gt;
      &lt;div id="info_box"&gt;
          &lt;div class="arrow"&gt;&lt;/div&gt;
          The standard Lorem Ipsum passage, used since the 1500s.
      &lt;/div&gt;
      &lt;script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          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'}}});
          });        
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>An image says more than a thousand words. I actually get this:</p>
  
  <p><a href="https://i.stack.imgur.com/KcYfJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KcYfJ.png" alt="Actual"></a></p>
  
  <p>And I want this (forgive my drawing skills, I actually want the arrow to have a matching color):</p>
  
  <p><a href="https://i.stack.imgur.com/2taN9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2taN9.png" alt="enter image description here"></a></p>