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