title: Dynamically change pointing arrow to point to the source of click
body: <p>I am currently trying to create a popover dialog which should point to an element which triggered it's appearance. When user clicks on first button, arrow should point to the middle of the button, and so on.</p>
  
  <p>I know how to create a pointing arrow with css but the problem is how to dynamically position it to point to the button which triggered it's appearance.</p>
  
  <p>Please check this JSFiddle <a href="https://jsfiddle.net/Zaukt/2540/" rel="nofollow">HERE</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*  ========== CSS ==========  */
  .container {
          background:white; 
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px; 
          width:100%; 
          height:150px;
          display: block;
          position: relative;
          margin-top:20px;
   }
      
  #pointer {
          border-bottom:solid 10px #FFF;
          border-left: solid 8px transparent;
          border-right: solid 8px transparent;
          position:absolute;
          width: 0;
          height: 0;
          top: -10px;
          right: 20px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!-- ============== HTML =============== --&gt;
   &lt;div class="btn-group" role="group" aria-label="..."&gt;
      &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
      &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
      &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
   &lt;/div&gt;
      
   &lt;div class="container"&gt;    
      &lt;div id="pointer"&gt;&lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What do you think? Thanks.</p>