Popovers

Popovers are powerful elements similar to tooltips and powered by Popper.js that can be applies to any interactive element.

Note: The container prop is not always necessary and it is required in the following examples just for demo purposes.

Basic Example

Popovers can be created using the <d-popover> component.


<div>
    <d-btn id="popover-example-1">Click Me</d-btn>
    <d-popover target="popover-example-1" container=".shards-demo--example--popover-01">
        <template slot="title">
            Title Here
        </template>
        Content Here
    </d-popover>
</div>

<!-- popover-1.vue -->

Triggers

The <d-popover> component, by default is triggered by the click event. However, this can be easily adjusted using the triggers component which accepts one or multiple triggers.


<div>
    <d-btn id="popover-example-2">Hover Me</d-btn>
    <d-popover target="popover-example-2"
        container=".shards-demo--example--popover-02"
        :triggers="['hover']">
        <template slot="title">
            Title Here
        </template>
        Content Here
    </d-popover>
</div>

<!-- popover-2.vue -->

Placement

Using the placement prop you can adjust where your popover will be displayed. So far, the following positions are available: top, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop, and leftbottom.


<div>
    <d-btn id="popover-example-3">Click Me</d-btn>
    <d-popover target="popover-example-3"
        :placement="'rightbottom'"
        container=".shards-demo--example--popover-03">
        <template slot="title">
            Title Here
        </template>
        Content Here
    </d-popover>
</div>

<!-- popover-3.vue -->

Props

Prop	Description	Type	Default	Required
:title	Title	`String`	""	False
:content	Content	`String`	""	False
:triggers	Triggers	`String \| Array`	"click"	False
:placement	Placement.	`String`	"top"	False
:target	The target element.	`String \| Object \| Func`		False
:delay	Delay in miliseconds.	`Number \| Object \| String`	0	False
:offset	Offset.	`Number \| String`		False
:no-fade	Disable animations.	`Boolean`	false	False
:container	Wrapping container.	`String`	null	False
:boundary	Instance boundaries.	`String \| Object`	"scrollParent"	False
:show	Show state.	`Boolean`	false	False
:disabled	Disabled state.	`Boolean`	false	False