<div>
                <button class="btn bg-primary text-white" data-fc-type="tooltip" data-fc-placement="bottom">
                    Tooltip Bottom
                </button>
                <div class="bg-slate-700 hidden mt-1 px-2 py-1 rounded transition-all text-white opacity-0 z-50" role="tooltip">
                    Bottom Tooltip
                    <div data-fc-arrow class="bg-slate-700 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                </div>
            </div>
            
            <div>
                <button class="btn bg-primary text-white" data-fc-type="tooltip" data-fc-placement="right">
                    Tooltip Right
                </button>
                <div class="bg-slate-700 hidden ms-1 px-2 py-1 rounded transition-all text-white opacity-0 z-50" role="tooltip">
                    Right Tooltip
                    <div data-fc-arrow class="bg-slate-700 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                </div>
            </div>
            
            <div>
                <button class="btn bg-primary text-white" data-fc-type="tooltip" data-fc-placement="top">
                    Tooltip Top
                </button>
                <div class="bg-slate-700 hidden px-2 py-1 rounded transition-all text-white opacity-0 z-50" role="tooltip">
                    Top Tooltip
                    <div data-fc-arrow class="bg-slate-700 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                </div>
            </div>
            
            <div>
                <button class="btn bg-primary text-white" data-fc-type="tooltip" data-fc-placement="left">
                    Tooltip Left
                </button>
                <div class="bg-slate-700 hidden me-1 px-2 py-1 rounded transition-all text-white opacity-0 z-50" role="tooltip">
                    Left Tooltip
                    <div data-fc-arrow class="bg-slate-700 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                </div>
            </div>
                                    
                                

                                    
            <div>
                <button class="btn bg-primary text-white" data-fc-type="tooltip" data-fc-placement="top">
                    Primary
                </button>
                <div class="bg-primary hidden px-2 py-1 rounded transition-all text-white opacity-0 z-50" role="tooltip">
                    Primary Tooltip
                    <div data-fc-arrow class="bg-primary w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                </div>
            </div>
            
            <div>
                <button class="btn bg-danger text-white" data-fc-type="tooltip" data-fc-placement="top">
                    Danger
                </button>
                <div class="bg-danger hidden px-2 py-1 rounded transition-all text-white opacity-0 z-50" role="tooltip">
                    Danger Tooltip
                    <div data-fc-arrow class="bg-danger w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                </div>
            </div>
            
            <div>
                <button class="btn bg-success text-white" data-fc-type="tooltip" data-fc-placement="top">
                    Success
                </button>
                <div class="bg-success hidden px-2 py-1 rounded transition-all text-white opacity-0 z-50" role="tooltip">
                    Success Tooltip
                    <div data-fc-arrow class="bg-success w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                </div>
            </div>
            
            <div>
                <button class="btn bg-warning text-white" data-fc-type="tooltip" data-fc-placement="top">
                    Warning
                </button>
                <div class="bg-warning hidden px-2 py-1 rounded transition-all text-white opacity-0 z-50" role="tooltip">
                    Warning Tooltip
                    <div data-fc-arrow class="bg-warning w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]"></div>
                </div>
            </div>
                                    
                                

                                    
                    <div class="text-muted">
                        می‌توانید از
                        <span class="underline italic cursor-help" data-fc-type="tooltip">تولتیپ</span>
                        <span class="bg-slate-700 hidden px-2 py-1 rounded transition-all text-white opacity-0 z-50" role="tooltip"> چرا در پایین می‌بینید
                            <span class="bg-slate-700 w-2.5 h-2.5 rotate-45 -z-10 rounded-[1px]" data-fc-arrow></span>
                        </span>
                    
                        برای مشخص کردن اطلاعات اضافی استفاده کنید. همچنین می‌توانید از
                        <span class="underline italic cursor-help" data-fc-placement="bottom" data-fc-type="tooltip">بزرگ</span> 
                        <div class="hidden">
                            <div class="max-w-xs bg-white border border-gray-100 text-left rounded-lg dark:bg-gray-800 dark:border-gray-700 p-3">
                                <p class="block text-lg font-medium">بررسی کلی</p>
                                <div class="text-sm text-gray-600 dark:text-gray-400 mt-2">
                                    <img alt="images" class="mb-3 rounded" src="https://placehold.co/300x150">
                                    <p>این بدنه پاپ‌اور است که متن پشتیبانی شده را به عنوان یک معرف طبیعی برای محتوای اضافی
                                        نشان می‌دهد.</p>
                                    <dl class="mt-3">
                                        <dt class="font-bold pt-3 first:pt-0 dark:text-white">واگذاری به:</dt>
                                        <dd class="text-gray-600 dark:text-gray-400">دنیش نوادیا</dd>
                                        <dt class="font-bold pt-3 first:pt-0 dark:text-white">سررسید:</dt>
                                        <dd class="text-gray-600 dark:text-gray-400">20 مارس 2023</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                        تولتیپ
                    </div>