Popover

Add small overlays of content, like those on the iPad, to any element for housing secondary information.

This page shows some example usage of the <BsPopover> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information.
<BsButton class="mb-1">
  Popover on left
  <BsPopover @placement="left" title="Popover on left">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magnam similique voluptate!
  </BsPopover>
</BsButton>
<BsButton class="mb-1">
  Popover on top
  <BsPopover @placement="top" title="Popover on top">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magnam similique voluptate!
  </BsPopover>
</BsButton>
<BsButton class="mb-1">
  Popover on bottom
  <BsPopover @placement="bottom" title="Popover on bottom">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magnam similique voluptate!
  </BsPopover>
</BsButton>
<BsButton class="mb-1">
  Popover on right
  <BsPopover @placement="right" title="Popover on right">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magnam similique voluptate!
  </BsPopover>
</BsButton>
<BsButton class="mb-1">
  Hover Popover
  <BsPopover @triggerEvents="hover" title="Hover Popover">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magnam similique voluptate!
  </BsPopover>
</BsButton>

Popover trigger

By default the popover will attach itself to the parent DOM element, but there are ways to customize this:

<button type="button" class="btn btn-secondary">
  DOM parent
  <BsPopover title="DOM parent">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magnam similique voluptate!
  </BsPopover>
</button>
<BsButton>
  Parent component
  <BsPopover @triggerElement="parentView" title="Parent component">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magnam similique voluptate!
  </BsPopover>
</BsButton>
<button type="button" id="popover-button" class="btn btn-secondary">
  CSS selector
</button>
<BsPopover @triggerElement="#popover-button" title="CSS selector">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magnam similique voluptate!
</BsPopover>

Dismiss on next click

Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

For proper cross-browser and cross-platform behavior, you must use the <a> tag, not the <button> tag, and you also must include a tabindex attribute.
<a href="#" role="button" tabindex="0" class="btn btn-primary">
  Focus me
  <BsPopover @triggerEvents="focus" title="Focused">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo magnam similiquevoluptate!
  </BsPopover>
</a>