# Tutorial: Creating a Popover Button with Custom Components

**URL:** <https://forums.realmacsoftware.com/t/tutorial-creating-a-popover-button-with-custom-components/44840>\
**Category:** RapidWeaver Elements\
**Created:** [October 3, 2024, 2:53pm UTC](https://forums.realmacsoftware.com/t/tutorial-creating-a-popover-button-with-custom-components/44840 "2024-10-03T14:53:17Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 3, 2024, 2:53pm UTC](https://forums.realmacsoftware.com/t/tutorial-creating-a-popover-button-with-custom-components/44840/1 "2024-10-03T14:53:17Z")

</div>

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](https://forums.realmacsoftware.com/t/button-options-popover/44764)!

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/9/091600fa75278602be77ae02597aa37cb78ed9e6.jpeg "Creating a Popover Button with Tailwind, Alpine JS, and ChatGPT") ](https://www.youtube.com/watch?v=oYEIdQUKXTY)

And here’s some sample code for the popover button that you can paste into a custom component to get started with…

```auto
<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

---

<div class="post-metadata">

**Author:** ![logrunner](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@logrunner](https://forums.realmacsoftware.com/u/logrunner)\
**Post date:** [October 3, 2024, 4:01pm UTC](https://forums.realmacsoftware.com/t/tutorial-creating-a-popover-button-with-custom-components/44840/2 "2024-10-03T16:01:34Z")

</div>

Hi @dan, you mentioned that you are using a Tailwind App in ChatGPT.

How do you go about doing that?

I have the ChatGPT App on my Mac.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 3, 2024, 5:51pm UTC](https://forums.realmacsoftware.com/t/tutorial-creating-a-popover-button-with-custom-components/44840/3 "2024-10-03T17:51:10Z")

</div>

Click the text at the top of the chat window and select “Explore GPTs” at the bottom of the menu.

 ![CleanShot 2024-10-03 at 6 .49.27@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/d/3d7a1d1e4b897d9ff8bebabbfbd452b56f782742.jpeg)

Then just search Tailwind in the store window… I use the one at the top with 25k+ users…

 ![CleanShot 2024-10-03 at 6 .49.46@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/9/292cbe90c5e526877569645545ad923148b28435.jpeg)