<button
    x-tooltip="'پیش‌فرض'"
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
  >
    پیش‌فرض
  </button>
  <button
    x-tooltip.light="'روشن'"
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80"
  >
    روشن
  </button>
  <button
    x-tooltip.primary="'اصلی'"
    class="btn bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
  >
    اصلی
  </button>
  <button
    x-tooltip.secondary="'ثانویه'"
    class="btn bg-secondary font-medium text-white hover:bg-secondary-focus focus:bg-secondary-focus active:bg-secondary-focus/90"
  >
    ثانویه
  </button>
  <button
    x-tooltip.info="'اطلاعات'"
    class="btn bg-info font-medium text-white hover:bg-info-focus focus:bg-info-focus active:bg-info-focus/90"
  >
    اطلاعات
  </button>
  <button
    x-tooltip.success="'موفقیت'"
    class="btn bg-success font-medium text-white hover:bg-success-focus focus:bg-success-focus active:bg-success-focus/90"
  >
    موفقیت
  </button>
  <button
    x-tooltip.warning="'هشدار'"
    class="btn bg-warning font-medium text-white hover:bg-warning-focus focus:bg-warning-focus active:bg-warning-focus/90"
  >
    هشدار
  </button>
  <button
    x-tooltip.error="'خطا'"
    class="btn bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90"
  >
    خطا
  </button>
              

                
  <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
    <button
      x-tooltip.placement.top.success="'بالا'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      بالا
    </button>
    <button
      x-tooltip.placement.top-start.success="'بالا (شروع)'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      بالا (شروع)
    </button>
    <button
      x-tooltip.placement.top-end.success="'بالا (پایان)'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      بالا (پایان)
    </button>
    <button
      x-tooltip.placement.right.success="'راست'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      راست
    </button>
    <button
      x-tooltip.placement.right-end.success="'راست (پایان)'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      راست (پایان)
    </button>
    <button
      x-tooltip.placement.right-start.success="'راست (شروع)'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      راست (شروع)
    </button>
    <button
      x-tooltip.placement.bottom.success="'پایین'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      پایین
    </button>
    <button
      x-tooltip.placement.bottom-start.success="'پایین (شروع)'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      پایین (شروع)
    </button>
    <button
      x-tooltip.placement.bottom-end.success="'پایین (پایان)'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      پایین (پایان)
    </button>
    <button
      x-tooltip.placement.left.success="'چپ'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      چپ
    </button>
    <button
      x-tooltip.placement.left-start.success="'چپ (شروع)'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      چپ (شروع)
    </button>
    <button
      x-tooltip.placement.left-end.success="'چپ (پایان)'"
      class="btn border border-primary font-medium text-primary hover:bg-primary hover:text-white focus:bg-primary focus:text-white active:bg-primary/90 dark:border-accent dark:text-accent-light dark:hover:bg-accent dark:hover:text-white dark:focus:bg-accent dark:focus:text-white dark:active:bg-accent/90"
    >
      چپ (پایان)
    </button>
  </div>
              

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.delay.500="'تاخیر 500 میلی‌ثانیه'"
  >
    تاخیر
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.duration.1000="'مدت زمان 1 ثانیه برای انیمیشن تولتیپ'"
  >
    مدت زمان
  </button>

              

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.on.mouseenter="'روی من بروید'"
  >
    هاور
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.on.click="'روی من کلیک کنید'"
  >
    کلیک
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.on.focusin="'روی من فوکوس کنید'"
  >
    فوکوس
  </button>

              

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.cursor="'دنبال‌ کننده ماوس'"
  >
    ماوس
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.cursor.x="'دنبال‌کننده محور افقی ماوس'"
  >
    افقی
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.cursor.y="'دنبال‌کننده محور عمودی ماوس'"
  >
    عمودی
  </button>
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.cursor.initial="'دنبال‌کننده ماوس تا نمایش'"
  >
    کلیک کنید
  </button>

              

                
  <button
    class="btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
    x-tooltip.interactive.content="'#content1'"
  >
    محتوا
  </button>

  <template id="content1">
    <div class="flex  space-x-3 rounded-lg bg-slate-150 p-3 dark:bg-navy-500">
      <div class="avatar">
        <img
          class="rounded-full"
          src="images/avatar/avatar-13.jpg"
          alt="عکس"
        />
      </div>
      <div>
        <p class="font-medium text-slate-700 dark:text-navy-100">جان دو</p>
        <p class="text-xs text-slate-500 dark:text-navy-200">مدیر محصول</p>
      </div>
    </div>
  </template>