A simple popup tooltip using a custom attribute.
<button x-data x-tooltip.content="Your tooltip message.">...</button>Change the interaction type from hover (which is the default) to click.
<button x-data x-tooltip.content="Your tooltip message.">...</button><button x-data @click="$tooltip('I am clickable tooltip.')">...</button>You can use a HTML Template element to render the tooltips content.
<div x-data="{ message: 'Hello, I`m a tooltip.' }">
<template x-ref="template">
<p x-text="message"></p>
</template>
<button class="c-btn"
x-tooltip="{ content: () => $refs.template.innerHTML,
allowHTML: true,
appendTo: $root }"
>
...
</button>
</div>Using HTML content to update the tooltip when clicking the favourites button.
Remove From Favourites
Add to Favourites
<div class="u-flex u-h-10 u-align-middle u-justify-center"
x-data="{ fav: false }"
>
<template x-ref="template">
<div class="u-w-12">
<p class="u-w-100% u-center" x-show="fav == true" style="display:none">Remove From Favourites</p>
<p class="u-w-100% u-center" x-show="fav != true">Add to Favourites</p>
</div>
</template>
<button class="c-btn c-btn--tertiary t-btn-fav | u-round" @click="fav = ! fav" x-tooltip="{ content: () => $refs.template.innerHTML, allowHTML: true, appendTo: $root, hideOnClick: false }">
<span class="u-hidden">Im a tooltip button.</span>
<svg class="c-icon t-star-remove" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav == true" style="display: none">
<path stroke-linecap="round" stroke-width="1.5" d="m8.995 12.527 5.99-.027"/>
<path fill-rule="nonzero" d="M7.31 1.103a.75.75 0 0 1 1.378 0l1.82 4.221 4.793.324a.75.75 0 0 1 .505 1.252l-.075.072L13.304 9H9.499a3.5 3.5 0 0 0-3.495 3.308L6 12.5c0 .488.1.953.28 1.375l-2.25 1.389a.75.75 0 0 1-1.142-.685l.013-.1.909-4.549L.27 6.972a.75.75 0 0 1 .327-1.31L.7 5.648l4.792-.324 1.82-4.22Z"/>
</svg>
<svg class="c-icon t-star-add" viewbox="0 0 16 16" aria-hidden="true" x-show.important="fav != true">
<g fill="none" fill-rule="evenodd">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m14.307 7.185.943-.788-5.249-.355L7.999 1.4l-2 4.642-5.249.355L4.632 9.64l-.996 4.985 2.735-1.688"/>
<path stroke-linecap="round" stroke-width="1.5" d="M12 8.498v6.001M9 11.5h6"/>
</g>
</svg>
</button>
</div>