wovoui

Popovers

Popovers are small tooltip which shows over certain elements. These are actually replacements of title.

Example


<Button id="one">Toggle Popover</Button>
<Popover target="one">
    Hello Popover!
</Popover>
1
2
3
4
5

Four directions

Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.

<Button variant="secondary" class="me-2" :id="d+'_direction'" v-for="d in ['top','right','bottom','left']">
  Popover on {{d}}
</Button>
<Popover :target="d+'_direction'" :placement="d" v-for="d in ['top','right','bottom','left']">
    Popover Content of <code>{{d}}</code>
</Popover>
1
2
3
4
5
6

Popover Header


<Button id="popoverheader">Toggle Popover</Button>
<Popover target="popoverheader" header="Popover Header">
    Hello Popover!
</Popover>
1
2
3
4
5