ng2-encrm-components/src/app/element-list/elements/popover-preview/popover-preview.component.html

angular 2 components

<div class="col-xs-12">
  <h1 id="popovers">Popovers</h1>
  <button class="btn btn-outline-primary"
          popover="Popover content"
          popoverTitle="Popover title"
          [popoverPlacement]="'right'">popover</button>
  <button class="btn btn-outline-primary"
          popover="Popover content"
          [flavor]="'success'"
          [popoverTitle]="'Popover success'"
          [popoverPlacement]="'top'">popover</button>
  <button class="btn btn-outline-primary"
          popover="Popover content"
          [flavor]="'default'"
          [popoverTitle]="'Popover default'"
          [popoverPlacement]="'bottom'">popover</button>
  <button class="btn btn-outline-primary"
          popover="Popover content"
          flavor="danger"
          [popoverTitle]="'Popover danger hover'"
          [popoverOnHover]="true"
          [popoverPlacement]="'left'">popover</button>
  <br>
  <br>
  <tabset>
    <tab heading="HTML">
      <pre highlight-js-content class="html"><code>
  &lt;button class=&quot;btn btn-outline-primary&quot;
          popover=&quot;Popover content&quot;
          [popoverTitle]=&quot;'Popover title'&quot;
          [popoverPlacement]=&quot;'right'&quot;&gt;popover&lt;/button&gt;
  &lt;button class=&quot;btn btn-outline-primary&quot;
          popover=&quot;Popover content&quot;
          [flavor]=&quot;'success'&quot;
          [popoverTitle]=&quot;'Popover success'&quot;
          [popoverPlacement]=&quot;'top'&quot;&gt;popover&lt;/button&gt;
  &lt;button class=&quot;btn btn-outline-primary&quot;
          popover=&quot;Popover content&quot;
          [flavor]=&quot;'default'&quot;
          [popoverTitle]=&quot;'Popover default'&quot;
          [popoverPlacement]=&quot;'bottom'&quot;&gt;popover&lt;/button&gt;
  &lt;button class=&quot;btn btn-outline-primary&quot;
          popover=&quot;Popover content&quot;
          flavor=&quot;danger&quot;
          [popoverTitle]=&quot;'Popover danger hover'&quot;
          [popoverOnHover]=&quot;true&quot;
          [popoverPlacement]=&quot;'left'&quot;&gt;popover&lt;/button&gt;
      </code></pre>
    </tab>
    <tab heading="TypeScript">
      <pre highlight-js-content class="typescript"><code>
none
      </code></pre>
    </tab>
  </tabset>

</div>