Vue Popovers

Bootstrap 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 Bootstrap popovers work.

Example

Copy

<base-button type="default"
             v-b-popover.hover.top="'This is a very beautiful popover, show some love.'"
             >Popover on top
</base-button>
<base-button type="default"
             v-b-popover.hover.right="'This is a very beautiful popover, show some love.'"
             >Popover on right
</base-button>
<base-button type="default"
             v-b-popover.hover.bottom="'This is a very beautiful popover, show some love.'"
             >Popover on bottom
</base-button>
<base-button type="default"
             v-b-popover.hover.left="'This is a very beautiful popover, show some love.'"
             >Popover on left
</base-button>

Variations

Copy

<base-button type="default" class="btn-tooltip"
             v-b-tooltip.hover.top="'This is a very beautiful popover, show some love.'">
    Default popover
</base-button>

<base-button type="primary" class="btn-tooltip"
             v-b-tooltip.hover.top="'This is a very beautiful popover, show some love.'">
    Primary popover
</base-button>

<base-button type="secondary" class="btn-tooltip"
             v-b-tooltip.hover.top="'This is a very beautiful popover, show some love.'">
    Secondary popover
</base-button>

<base-button type="info" class="btn-tooltip"
             v-b-tooltip.hover.top="'This is a very beautiful popover, show some love.'">
    Info popover
</base-button>

<base-button type="success" class="btn-tooltip"
             v-b-tooltip.hover.top="'This is a very beautiful popover, show some love.'">
    Success popover
</base-button>

<base-button type="danger" class="btn-tooltip"
             v-b-tooltip.hover.top="'This is a very beautiful popover, show some love.'">
    Danger popover
</base-button>

<base-button type="warning" class="btn-tooltip"
             v-b-tooltip.hover.top="'This is a very beautiful popover, show some love.'">
    Warning popover
</base-button>