Popover JS
Popover is a component used by Dropdown and Select to render content anchored to an element in the document.
import {Popover} from 'uniform';
new Popover({
anchor: document.getElementById('button'),
content: '<div class="bg-green-20 border border-green text-green-80 pad rounded">Example Content</div>'
}).render()Options
| Option | Type | Description | Default | |
|---|---|---|---|---|
anchor |
Element |
Element to anchor content to. | REQUIRED | |
content |
HTML | HTML to render into popover. | REQUIRED | |
align |
String | [left|right|center|#px] [top|center|bottom|#px] |
'center bottom' |
OPTIONAL |
zIndex |
Int | Adjust the default zIndex | OPTIONAL | |
offset |
String | Number of pixels to alter location after alignment. {left: #px, top: #px} |
{left: 0, top: 0} |
OPTIONAL |
container |
Element |
Element to append popover to | document |
OPTIONAL |
transition |
String | Class to generate transition effect. Reference pre-built transitions | false |
OPTIONAL |
Alignment
align: 'left top'
|
|
align: 'left center'
|
|
align: 'left bottom'
|
|
align: 'center top'
|
|
align: 'center center'
|
|
align: 'center bottom'
|
|
align: 'right top'
|
|
align: 'right center'
|
|
align: 'right bottom'
|
Transition
transition: 'transition-fade-up'
|
|
transition: 'transition-fade-down'
|
|
transition: 'transition-fade-left'
|
|
transition: 'transition-fade-right'
|
uniformPointer
Add class -pointer and/or -pointer-[top|bottom|right|left] to show a pointer that uses background and border of Popover
class: 'uniformPointer -top'
|
|
class: 'uniformPointer -bottom'
|
|
class: 'uniformPointer -right'
|
|
class: 'uniformPointer -left'
|