Angular Popovers

Our Angular popovers are a small overlay of content that is used to demonstrate secondary information of any component when it is clicked by a user. For example, you can think about those from iOS’s devices. Now keep reading some examples to see how Angular popovers work.

Example

<button type="button" class="btn btn-default" placement="top"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on top
</button>
<button type="button" class="btn btn-default" placement="right"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on right
</button>
<button type="button" class="btn btn-default" placement="bottom"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on bottom
</button>
<button type="button" class="btn btn-default" placement="left"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on left
</button>

Variations

<button type="button" class="btn btn-default" placement="top"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on top
</button>
<button type="button" class="btn btn-primary" placement="top"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" placement="top"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on bottom
</button>
<button type="button" class="btn btn-info" placement="top"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on left
</button>
<button type="button" class="btn btn-success" placement="top"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on left
</button>
<button type="button" class="btn btn-warning" placement="top"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on left
</button>
<button type="button" class="btn btn-danger" placement="top"
ngbPopover="This is a very beautiful popover, show some love.">
  Popover on left
</button>