title: How to use the bootstrap popover without jquery popover function and angular4 library in angular4
body: <pre><code>&lt;!-- Popover #1  used this html--&gt; 
  &lt;a class="btn btn-primary" data-placement="top" data-
  popover-content="#a1" data-toggle="popover" data-t 
  trigger="focus" href="#" tabindex="0"&gt;Popover 
  Example&lt;/a&gt;
  
  &lt;!-- Content for Popover #1 --&gt;
  &lt;div class="hidden" id="a1"&gt;
  &lt;div class="popover-heading"&gt;
  This is the heading for #1
  &lt;/div&gt;
  &lt;div class="popover-body"&gt;
  This is the body for #1
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Used this html code, I need css for top,left,right and bottom<br>
     AND trigger it with directive as I do not want to use jQuery<br>
     Code or any library.</p>