- Elements
- Popovers
Default
Code
<!-- link -->
<a href="javascript:;" @click="$popovers('Popover using ANCHOR tag')" class="btn bg-primary btn-primary">Link</a>
<!-- button -->
<button type="button" @click="$popovers('Popover using BUTTON tag')" class="btn btn-success">Button</button>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.magic("popovers", (el) => (message, placement) => {
let instance = tippy(el, {
content: message,
placement: placement || undefined,
interactive: true,
allowHTML: true,
delay: el.getAttribute("data-delay") || 0,
animation: el.getAttribute("data-animation") || "fade",
theme: el.getAttribute("data-theme") || "",
trigger: el.getAttribute("data-trigger") || "click",
});
instance.show();
});
});
</script>
Placement
Code
<!-- top -->
<button type="button" @click="$popovers('Popover on top', 'top')" class="btn btn-info">Popover on top</button>
<!-- left -->
<button type="button" @click="$popovers('Popover on left', $store.app.rtlClass === 'rtl' ? 'right' :'left')" class="btn btn-secondary">Popover on left</button>
<!-- right -->
<button type="button" @click="$popovers('Popover on right', $store.app.rtlClass === 'rtl' ? 'left' :'right')" class="btn btn-danger">Popover on right</button>
<!-- bottom -->
<button type="button" @click="$popovers('Popover on bottom', 'bottom')" class="btn btn-warning">Popover on bottom</button>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.magic("popovers", (el) => (message, placement) => {
let instance = tippy(el, {
content: message,
placement: placement || undefined,
interactive: true,
allowHTML: true,
delay: el.getAttribute("data-delay") || 0,
animation: el.getAttribute("data-animation") || "fade",
theme: el.getAttribute("data-theme") || "",
trigger: el.getAttribute("data-trigger") || "click",
});
instance.show();
});
});
</script>
Dismissible popover
Code
<!-- dismissible -->
<button type="button" @click="$popovers('Popover on left', $store.app.rtlClass === 'rtl' ? 'right' : 'left')" data-dismissable="true" class="btn btn-dark">Popover on left</button>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.magic("popovers", (el) => (message, placement) => {
let instance = tippy(el, {
content: message,
placement: placement || undefined,
interactive: true,
allowHTML: true,
delay: el.getAttribute("data-delay") || 0,
animation: el.getAttribute("data-animation") || "fade",
theme: el.getAttribute("data-theme") || "",
trigger: el.getAttribute("data-trigger") || "click",
});
instance.show();
});
});
</script>
Options
Code
<!-- hover -->
<button type="button" @mouseenter="$popovers('On hover')" data-trigger="mouseenter" class="btn btn-primary">On Hover</button>
<!-- focus -->
<button type="button" @focus="$popovers('On hover')" data-trigger="focus" class="btn btn-secondary">On Focus</button>
<!-- delay -->
<button type="button" @click="$popovers('Delay 1s')" data-delay="1000" class="btn btn-info">Delay</button>
<!-- disabled animation -->
<button type="button" @click="$popovers('Disabled animation')" data-animation="false" class="btn btn-dark">Disabled Animation</button>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.magic("popovers", (el) => (message, placement) => {
let instance = tippy(el, {
content: message,
placement: placement || undefined,
interactive: true,
allowHTML: true,
delay: el.getAttribute("data-delay") || 0,
animation: el.getAttribute("data-animation") || "fade",
theme: el.getAttribute("data-theme") || "",
trigger: el.getAttribute("data-trigger") || "click",
});
instance.show();
});
});
</script>
Colors
Code
<!-- primary -->
<button type="button" @click="$popovers('Primary')" data-theme="primary" class="btn btn-primary">Primary</button>
<!-- success -->
<button type="button" @click="$popovers('Success')" data-theme="success" class="btn btn-success">Success</button>
<!-- info -->
<button type="button" @click="$popovers('Info')" data-theme="info" class="btn btn-info">Info</button>
<!-- danger -->
<button type="button" @click="$popovers('Danger')" data-theme="danger" class="btn btn-danger">Danger</button>
<!-- warning -->
<button type="button" @click="$popovers('Warning')" data-theme="warning" class="btn btn-warning">Warning</button>
<!-- secondary -->
<button type="button" @click="$popovers('Secondary')" data-theme="secondary" class="btn btn-secondary">Secondary</button>
<!-- dark -->
<button type="button" @click="$popovers('Dark')" data-theme="dark" class="btn btn-dark">Dark</button>
<!-- script -->
<script>
document.addEventListener("alpine:init", () => {
Alpine.magic("popovers", (el) => (message, placement) => {
let instance = tippy(el, {
content: message,
placement: placement || undefined,
interactive: true,
allowHTML: true,
delay: el.getAttribute("data-delay") || 0,
animation: el.getAttribute("data-animation") || "fade",
theme: el.getAttribute("data-theme") || "",
trigger: el.getAttribute("data-trigger") || "click",
});
instance.show();
});
});
</script>
© . Vristo All rights reserved.