<div class="row">
  <div class="col-12">
    <app-heading></app-heading>
    <app-breadcrumb></app-breadcrumb>
    <div class="separator mb-5"></div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'popover-tooltip.popover' | translate}}</h5>

        <button type="button" class="btn btn-default btn-secondary mb-2" triggers="focus"
          popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="{{'popover-tooltip.popover' | translate}}  {{'popover-tooltip.top' | translate}}"
          placement="top">
          {{'popover-tooltip.top' | translate}}
        </button> {{" "}}
        <button type="button" class="btn btn-default btn-secondary mb-2" triggers="focus"
          popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="{{'popover-tooltip.popover' | translate}}  {{'popover-tooltip.right' | translate}}"
          placement="right">
          {{'popover-tooltip.right' | translate}}
        </button> {{" "}}
        <button type="button" class="btn btn-default btn-secondary mb-2" triggers="focus"
          popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="{{'popover-tooltip.popover' | translate}}  {{'popover-tooltip.auto' | translate}}"
          placement="auto">
          {{'popover-tooltip.auto' | translate}}
        </button> {{" "}}
        <button type="button" class="btn btn-default btn-secondary mb-2" triggers="focus"
          popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="{{'popover-tooltip.popover' | translate}}  {{'popover-tooltip.left' | translate}}"
          placement="left">
          {{'popover-tooltip.left' | translate}}
        </button> {{" "}}
        <button type="button" class="btn btn-default btn-secondary mb-2" triggers="focus"
          popover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="{{'popover-tooltip.popover' | translate}}  {{'popover-tooltip.bottom' | translate}}"
          placement="bottom">
          {{'popover-tooltip.bottom' | translate}}
        </button>

      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <div class="card mb-4">
      <div class="card-body">
        <h5 class="mb-4">{{'popover-tooltip.tooltip' | translate}}</h5>

        <button type="button" class="btn btn-default btn-secondary mb-2"
          tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="top">
          {{'popover-tooltip.top' | translate}}
        </button> {{" "}}
        <button type="button" class="btn btn-default btn-secondary mb-2"
          tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="right">
          {{'popover-tooltip.right' | translate}}
        </button> {{" "}}
        <button type="button" class="btn btn-default btn-secondary mb-2"
          tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="auto">
          {{'popover-tooltip.auto' | translate}}
        </button> {{" "}}
        <button type="button" class="btn btn-default btn-secondary mb-2"
          tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="left">
          {{'popover-tooltip.left' | translate}}
        </button> {{" "}}
        <button type="button" class="btn btn-default btn-secondary mb-2"
          tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." placement="bottom">
          {{'popover-tooltip.bottom' | translate}}
        </button>

      </div>
    </div>
  </div>
</div>
