title: Add popover when mouse-up event triggered
body: <p>I am going to draw rectangle over image on html canvas. And I want to show popover with form just after mouse-up event of rectangle. Can Anyone suggest option to do this?
  Below I added what I have tried, and it was not succeed.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("h2 &gt; .editable").popover({
    html: true,
    sanitize: false,
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h2 class="popover"&gt;
    &lt;span class="editable" data-toggle="popover" data-container="body" data-title="Edit" data-content="&lt;form&gt;
    &lt;div class='form-group'&gt;
      &lt;label for='annotation'&gt;label&lt;/label&gt;
      &lt;input type='text' class='form-control' id='lbl'  placeholder='Enter name'/&gt;
    &lt;/div&gt;
   
    &lt;button type='submit' class='btn btn-primary'&gt;Submit&lt;/button&gt;
  &lt;/form&gt;"&gt;
                      &lt;/span&gt;
  &lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>