Sign in


Sign up


Bootstrap popovers

Bootstrap popover is a component which displays a box with a content after a click on an element - similar to the tooltip but can contain more content.

Click the buttons below to see popovers:

                        
<popover trigger="click" :options="{placement: 'top'}">
  <div class="popper">
    <div class="popover-header">
      popover on top
    </div>
    <div class="popover-body">
      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    </div>
  </div>
  <btn slot="reference">
    Popover on top
  </btn>
</popover>
<popover trigger="click" :options="{placement: 'right'}">
  <div class="popper">
    <div class="popover-header">
      popover on right
    </div>
    <div class="popover-body">
      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    </div>
  </div>
  <btn slot="reference">
    Popover on right
  </btn>
</popover>
<popover trigger="click" :options="{placement: 'bottom'}">
  <div class="popper">
    <div class="popover-header">
      popover on bottom
    </div>
    <div class="popover-body">
      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    </div>
  </div>
  <btn slot="reference">
    Popover on bottom
  </btn>
</popover>
<popover trigger="click" :options="{placement: 'left'}">
  <div class="popper">
    <div class="popover-header">
      popover on left
    </div>
    <div class="popover-body">
      Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
    </div>
  </div>
  <btn slot="reference">
    Popover on left
  </btn>
</popover>