Example
Theme
Auto
Auto
Light
Dark
Scale
Medium
Large
Medium
Small
Everyone deserves creative freedom;
it's our main goal.
it's our main goal.
<button class="ts-button" popovertarget="popup">
Open Popover ✨
</button>
<div class="ts-popover" id="popup" popover>
<div class="ts-content">
Everyone deserves creative freedom;<br>
it's our main goal.
</div>
</div>Introduction
Popover uses the native Popover API. It will automatically attach to the corresponding element when displayed.
Structure
Content should be placed inside the popover block, see the Compositions below.
<div class="ts-popover" popover>
<!-- ... -->
</div>Compositions
A form will pop up when certain text is clicked for editing.
Edit Price
<button class="ts-text is-editable" popovertarget="edit">
Product Price: $3,600
</button>
<div class="ts-popover" id="edit" popover>
<div class="ts-content is-secondary is-dense">
<div class="ts-text is-bold">Edit Price</div>
</div>
<div class="ts-divider"></div>
<div class="ts-content">
<div class="ts-grid">
<div class="column is-fluid">
<div class="ts-input">
<input type="number" value="3600">
</div>
</div>
<div class="column">
<button class="ts-button is-icon" popovertarget="edit">
<span class="ts-icon is-check-icon"></span>
</button>
</div>
</div>
</div>
</div>Clicking on a profile picture will pop up the user's details.
Yami Odymel
<button class="ts-image" popovertarget="profile">
<img src="user.png" width="32">
</button>
<div class="ts-popover" id="profile" popover>
<div class="ts-image">
<img src="image.png" width="300">
</div>
<div class="ts-content">
<div class="ts-header is-heavy">Yami Odymel</div>
<div class="ts-meta is-secondary">
<a class="item">Joined 3 days ago</a>
<a class="item">5 Friends</a>
</div>
</div>
</div>JavaScript Features
Clicking on a button with the [popovertarget] attribute will open or close the popover with the corresponding [id].
Click outside the content
to close this popup.
to close this popup.
<button class="ts-button" popovertarget="example">
Open Popover ✨
</button>
<div class="ts-popover" id="example" popover>
<div class="ts-content">
Click outside the content<br>
to close this popup.
</div>
</div>Open the popover with the native .showPopover() function. When opened, the toggle event will be triggered.
// Open the `#popover` popover.
document.querySelector('#popover').showPopover();
// Close the `#popover` popover.
document.querySelector('#popover').hidePopover();Properties
| Description | Default Value | Target | |
|---|---|---|---|
| [data-position] |
The preferred position of the popover.
|
bottom |
.ts-popover |
| [data-anchor] |
The target element |
|
.ts-popover |
