Popover
Popovers are a non-modal dialog. The component should be paired with a clickable or hoverable trigger element and contain at least one focusable element.
Attributes
| attribute: | type: | required? | default: | description: |
|---|---|---|---|---|
| header | string | no | ||
| text | string | no | Either |
|
| target | string | no | CSS selector of the popover's target |
|
| auto | boolean | no |
true
|
Whether popover should automatically open / close on hover / leave |
| top | boolean | no | Popover should display above of its target by default |
|
| bottom | boolean | no | Popover should display below of its target by default |
|
| left | boolean | no | Popover should display on the left side of its target by default |
|
| right | boolean | no | Popover should display on the right side of its target by default |
Methods
setTarget(element)
Set the popover target.
| param: | type: | default: | description: |
|---|---|---|---|
| element | (HTML)Element | Target element for popover. |
open()
Opens the popover
close()
Closes the popover
Examples
Popovers
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>
Lorem ipsum dolor sit amet, <mark id="first">consectetur</mark> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu <mark id="second">fugiat nulla pariatur</mark>. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est <mark id="third">laborum</mark>.
</p>
<dl-popover top target="#first" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do ei usmod tempor incididunt ut lab."></dl-popover>
<dl-popover left target="#second" header="Popover title"></dl-popover>
<dl-popover bottom right target="#third" header="Popover title" text="Lorem ipsum dolor sit amet."></dl-popover>