Hello,
This weeks tutorial is a fairly advanced one. It’s about building a popover button by using ChatGPT and Custom Components. This tutorial was inspired by the thread here from the past week!
And here’s some sample code for the popover button that you can paste into a custom component to get started with…
<div class="flex items-center justify-center">
<!-- Button with Popover on Hover -->
<div x-data="{ open: false }" class="relative">
<!-- Button -->
<button
@mouseenter="open = true"
@mouseleave="open = false"
class="px-4 py-2 text-white bg-brand-500 rounded hover:bg-brand-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
>
Hover Me
</button>
<!-- Popover Above -->
<div
x-show="open"
class="absolute left-1/2 bottom-full z-10 w-64 p-4 mb-2 rounded-lg transform -translate-y-3 -translate-x-1/2 bg-white/30 backdrop-blur-lg rounded shadow-md"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform translate-y-2 scale-75"
x-transition:enter-end="opacity-100 transform -translate-y-3"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 transform -translate-y-3"
x-transition:leave-end="opacity-0 transform -translate-y-2"
>
<p class="text-gray-600 text-center text-sm">This is a custom component in Elements!</p>
</div>
</div>
Feedback
Let me know what you thought of the tutorial, was it helpful? What else would you like to see covered? Let me know in the comments below.
Cheers,
Dan & Team Realmac
