<button class="btn bg-primary text-white" data-fc-target="default-tooltip" data-fc-trigger="click" data-fc-type="tooltip">
                                            Click me
                                        </button>
                                        <div id="default-tooltip" class="bg-slate-700 hidden mt-1 px-2 py-1 rounded transition-all text-white opacity-0 z-50">
                                            Believe me! I'm Popover 😀
                                            <div class="bg-slate-700 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]" data-fc-arrow></div>
                                        </div>
                                    
                                

                                    
                                        <button class="btn bg-primary text-white" data-fc-trigger="click" data-fc-type="tooltip">
                                            Click me
                                        </button>
                                        <div class="bg-slate-700 hidden mt-1 px-2 py-1 rounded transition-all text-white opacity-0 z-50">
                                            It's magic
                                            <div class="bg-slate-700 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]" data-fc-arrow></div>
                                        </div>
                                    
                                

                                    
                                        <div>
                                            <button type="button" data-fc-type="tooltip" data-fc-placement="top" data-fc-trigger="click" class="btn bg-primary/10 text-primary">
                                                Popover on Top
                                            </button>
                                            <div class="bg-gray-400 hidden px-3 py-1 rounded-md transition-all text-white opacity-0 z-50">
                                                Top popover
                                                <div data-fc-arrow class="bg-gray-400 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                                            </div>
                                        </div>

                                        <div>
                                            <button type="button" data-fc-type="tooltip" data-fc-placement="bottom" data-fc-trigger="click" class="btn bg-primary/10 text-primary">
                                                Popover on Bottom
                                            </button>
                                            <div class="bg-gray-400 hidden px-3 py-1 rounded-md transition-all text-white opacity-0 z-50">
                                                Bottom popover
                                                <div data-fc-arrow class="bg-gray-400 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                                            </div>
                                        </div>

                                        <div>
                                            <button type="button" data-fc-type="tooltip" data-fc-placement="left" data-fc-trigger="click" class="btn bg-primary/10 text-primary">
                                                Popover on Left
                                            </button>
                                            <div class="bg-gray-400 hidden px-3 py-1 rounded-md transition-all text-white opacity-0 z-50">
                                                <div data-fc-arrow class="bg-gray-400 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                                                Left popover
                                            </div>
                                        </div>

                                        <div>
                                            <button type="button" data-fc-type="tooltip" data-fc-placement="right" data-fc-trigger="click" class="btn bg-primary/10 text-primary">
                                                Popover on Right
                                            </button>
                                            <div class="bg-gray-400 hidden px-3 py-1 rounded-md transition-all text-white opacity-0 z-50">
                                                Right popover
                                                <div data-fc-arrow class="bg-gray-400 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                                            </div>
                                        </div>
                                    
                                

                                    
                                        <div>
                                            <button type="button" data-fc-type="tooltip" data-fc-placement="top" data-fc-trigger="click" class="btn bg-primary text-white">
                                                Popover With Text
                                            </button>
                                            <div class="w-72 hidden z-50">
                                                <div data-fc-arrow class="bg-white border border-gray-100 w-3 h-3 rotate-45 -z-10 rounded-[1px] dark:bg-gray-800 dark:border-gray-700"></div>
                                                <div class="bg-white border border-gray-100 dark:bg-gray-800 dark:border-gray-700">
                                                    <div class="px-4 py-3 border-b dark:border-gray-700">Popover title</div>
                                                    <div class="p-4">
                                                        And here's some amazing content. It's very engaging. Right?
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
        
                                        <div>
                                            <button type="button" data-fc-type="tooltip" data-fc-placement="bottom" data-fc-trigger="click" class="btn bg-primary text-white">
                                                Popover with Images
                                            </button>
        
                                            <div class="hidden z-50">
                                                <div data-fc-arrow class="bg-white border border-gray-100 shadow-lg w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px] dark:bg-gray-800 dark:border-gray-700"></div>
                                                <div class="max-w-xs bg-white border border-gray-100 text-left rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700" role="tooltip">
                                                    <span class="pt-3 px-4 block text-lg font-bold text-gray-800 dark:text-white">Overview</span>
                                                    <div class="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
                                                        <img src="https://placehold.co/600x400" class="mb-3 rounded" alt="images">
                                                        <p>This is a popover body with supporting text below as a natural lead-in to additional content.</p>
                                                        <dl class="mt-3">
                                                            <dt class="font-bold pt-3 first:pt-0 dark:text-white">Assigned to:</dt>
                                                            <dd class="text-gray-600 dark:text-gray-400">Mark Welson</dd>
                                                            <dt class="font-bold pt-3 first:pt-0 dark:text-white">Due:</dt>
                                                            <dd class="text-gray-600 dark:text-gray-400">December 21, 2021</dd>
                                                        </dl>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>