vue-bootstrap

# Popover

# Demo

Click me I am a Span 
<!-- span - hover -->
<popover
  title="Hello world!"
  placement="top"
  origin="left"
  wrapper-tag="span"
  trigger="hover"
>
  <span class="btn btn-primary">Click me</span>
    <div slot="content">
      This is the content
    </div>
  </popover>
<!-- button - click -->
<popover title="Hello world!" placement="top" origin="left">
  <span class="btn btn-primary">I am a button</span>
    <div slot="content">
      This is the content
    </div>
  </popover>
<!-- span - hover-click -->
<popover
  title="Hello world!"
  placement="top"
  origin="left"
  wrapper-tag="span"
  trigger="hover-click"
>
  <span class="btn btn-primary">I am a Span</span>
    <div slot="content">
      This is the content
    </div>
  </popover>

# Props

title

Type
String

Description
Title set to the tooltip in an `

` tag
content

Type
String

Description
Content of the popover. A slot can also be used to inject content (like in the example above).
placement

Type
String

Default
top

Description
Placement (top, bottom, left or right)
origin

Type
String

Default
center

Description
Origin (top, bottom, left, right or center).

It only makes sense to use certain combinations of placement and origin:

- If the placement is top or bottom, the origin can be left, right or center.
- If the placement is left or right, the origing can be top, bottom or center.

The origin defaults to center.
effect

Type
String

Default
fade

Description
Effect (currently only the fade effect is supported)
trigger

Type
String

Default
click

Description
Trigger - acceptable values ["click" || "hover" || "hover-click"]
wrapperTag

Type
String

Default
button

Description
HTML element that will work as a trigger - acceptable values are ["button" || "span"]
append-to

Type
String

Default
body

Description
The element to which to append the popover
popover-wrap-class

Type
String

Description
Additional class for the popover div that is wrapping the trigger
popover-class

Type
String

Description
Additional class for the popover

← Search field →