Lineone - Popover Component

Popover

Components
Popover

Basic Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

UI/UX Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Tag 1 Tag 2 Tag 3

Lorem ipsum dolor sit amet, elit.

                
  <div
    x-data="usePopper({
       offset: 12,
       placement: 'right-end',
       modifiers: [
          {name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
          {name: 'preventOverflow', options: {padding: 10}}
       ]
    })"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="flex"
  >
    <button
      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"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      Basic Popover
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div class="popper-box max-w-xs">
        <div
          class="rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700"
        >
          <h3
            class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
          >
            UI/UX Design
          </h3>
          <p class="mt-2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </p>
          <div class="mt-3 flex  space-x-reverse space-x-2">
            <a
              href="#"
              class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              Tag 1
            </a>
            <a
              href="#"
              class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              Tag 2
            </a>
            <a
              href="#"
              class="tag bg-slate-150 text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-100 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
            >
              Tag 3
            </a>
          </div>
          <p class="mt-3 text-xs text-slate-400 dark:text-navy-300">
            Lorem ipsum dolor sit amet, elit.
          </p>
        </div>
        <div class="size-4" data-popper-arrow>
          <svg
            viewBox="0 0 16 9"
            xmlns="http://www.w3.org/2000/svg"
            class="absolute size-4"
            fill="currentColor"
          >
            <path
              class="text-slate-150 dark:text-navy-600"
              d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
            />
            <path
              class="text-white dark:text-navy-700"
              d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>

Advanced Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

Group Lesson

Social Media Marketing

Lorem ipsum dolor sit amet consectetur adipisicing elit.

25 May, 2022

                
  <div
    x-data="usePopper({
       offset: 12,
       placement: 'right-end',
       modifiers: [
          {name: 'flip', options: {fallbackPlacements: ['bottom','top']}},
          {name: 'preventOverflow', options: {padding: 10}}
       ]
    })"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="flex"
  >
    <button
      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"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      Lessons
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div class="popper-box max-w-xs">
        <div
          class="rounded-md border border-slate-150 bg-white py-3 px-4 dark:border-navy-600 dark:bg-navy-700"
        >
          <h3
            class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
          >
            Group Lesson
          </h3>

          <div class="mt-3">
            <p class="font-medium text-slate-600 dark:text-navy-100">
              Social Media Marketing
            </p>
            <p class="mt-1 text-xs">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </p>
          </div>
          <div class="mt-4 flex flex-wrap space-x-reverse -space-x-2">
            <div class="avatar size-8 hover:z-10">
              <img
                class="rounded-full ring ring-white dark:ring-navy-700"
                src="images/avatar/avatar-16.jpg"
                alt="avatar"
              />
            </div>

            <div class="avatar size-8 hover:z-10">
              <div
                class="is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
              >
                jd
              </div>
            </div>

            <div class="avatar size-8 hover:z-10">
              <img
                class="rounded-full ring ring-white dark:ring-navy-700"
                src="images/avatar/avatar-20.jpg"
                alt="avatar"
              />
            </div>

            <div class="avatar size-8 hover:z-10">
              <img
                class="rounded-full ring ring-white dark:ring-navy-700"
                src="images/avatar/avatar-19.jpg"
                alt="avatar"
              />
            </div>
          </div>
          <div class="mt-4 flex items-center justify-between">
            <p class="flex items-center  space-x-reverse space-x-2">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-4.5 text-slate-400 dark:text-navy-300"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="1.5"
                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                ></path>
              </svg>
              <span class="text-xs">25 May, 2022</span>
            </p>
            <button
              class="btn size-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 hover:shadow-lg hover:shadow-slate-200/50 focus:bg-slate-200 focus:shadow-lg focus:shadow-slate-200/50 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:hover:shadow-navy-450/50 dark:focus:bg-navy-450 dark:focus:shadow-navy-450/50 dark:active:bg-navy-450/90"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="size-5 rotate-45"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M7 11l5-5m0 0l5 5m-5-5v12"
                ></path>
              </svg>
            </button>
          </div>
        </div>
        <div class="size-4" data-popper-arrow>
          <svg
            viewBox="0 0 16 9"
            xmlns="http://www.w3.org/2000/svg"
            class="absolute size-4"
            fill="currentColor"
          >
            <path
              class="text-slate-150 dark:text-navy-600"
              d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
            />
            <path
              class="text-white dark:text-navy-700"
              d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>

Form Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

Select Columns

Lorem ipsum dolor sit amet, consectetur.

ID Name Email

Address

Created at Updated at

                
  <div
    x-data="usePopper({
       offset: 12,
       placement: 'auto',
       modifiers: [
          {name: 'preventOverflow', options: {padding: 10}}
       ]
    })"
    @click.outside="if(isShowPopper) isShowPopper = false"
    class="flex"
  >
    <button
      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"
      x-ref="popperRef"
      @click="isShowPopper = !isShowPopper"
    >
      Choose Columns
    </button>
    <div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
      <div class="popper-box max-w-[16rem]">
        <div
          class="rounded-md border border-slate-150 bg-white p-4 dark:border-navy-600 dark:bg-navy-700"
        >
          <h3
            class="text-base font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100"
          >
            Select Columns
          </h3>
          <p class="mt-1 text-xs+">Lorem ipsum dolor sit amet, consectetur.</p>
          <div
            class="mt-4 flex flex-col space-y-4 text-slate-600 dark:text-navy-100"
          >
            <label class="inline-flex items-center  space-x-reverse space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>ID</p>
            </label>
            <label class="inline-flex items-center  space-x-reverse space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Name</p>
            </label>
            <label class="inline-flex items-center  space-x-reverse space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Email</p>
            </label>
            <label class="inline-flex items-center  space-x-reverse space-x-2">
              <input
                class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Address</p>
            </label>
          </div>
          <div class="my-4 h-px bg-slate-200 dark:bg-navy-500"></div>
          <div
            class="flex flex-col space-y-4 text-slate-600 dark:text-navy-100"
          >
            <label class="inline-flex items-center  space-x-reverse space-x-2">
              <input
                checked
                class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Created at</p>
            </label>
            <label class="inline-flex items-center  space-x-reverse space-x-2">
              <input
                class="form-checkbox is-basic size-5 rounded border-slate-400/70 checked:border-primary checked:bg-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:border-accent dark:checked:bg-accent dark:hover:border-accent dark:focus:border-accent"
                type="checkbox"
              />
              <p>Updated at</p>
            </label>
          </div>
          <button
            @click="isShowPopper=false"
            class="btn mt-4 h-8 w-full rounded-md bg-primary px-4 text-xs+ 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"
          >
            Apply
          </button>
        </div>
        <div class="size-4" data-popper-arrow>
          <svg
            viewBox="0 0 16 9"
            xmlns="http://www.w3.org/2000/svg"
            class="absolute size-4"
            fill="currentColor"
          >
            <path
              class="text-slate-150 dark:text-navy-600"
              d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
            />
            <path
              class="text-white dark:text-navy-700"
              d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>

Profile Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

John Doe

@johndoeaccount

Sally Ramos

@sallyramos

Katrina West

@katrinawest

                
  <div class="flex flex-wrap justify-center space-x-reverse -space-x-2 sm:justify-start">
    <div
      x-data="usePopper({
         offset: 12,
         placement: 'top',
         modifiers: [
            {name: 'preventOverflow', options: {padding: 10}}
         ]                     
      })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-19.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="avatar size-16">
              <img
                class="rounded-full"
                src="images/avatar/avatar-19.jpg"
                alt="avatar"
              />
            </div>
            <p
              class="pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
            >
              John Doe
            </p>
            <a
              href="#"
              class="font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
              >@johndoeaccount</a
            >
            <button
              class="btn mt-4 h-8 rounded-full bg-primary px-4 text-xs+ 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"
            >
              Follow
            </button>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="usePopper({
         offset: 12,
         placement: 'top',    
         modifiers: [
            {name: 'preventOverflow', options: {padding: 10}}
         ]                    
      })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-11.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="avatar size-16">
              <img
                class="rounded-full"
                src="images/avatar/avatar-11.jpg"
                alt="avatar"
              />
            </div>
            <p
              class="pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
            >
              Sally Ramos
            </p>
            <a
              href="#"
              class="font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
              >@sallyramos
            </a>
            <button
              class="btn mt-4 h-8 rounded-full bg-primary px-4 text-xs+ 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"
            >
              Follow
            </button>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="usePopper({
         offset: 12,
         placement: 'top',  
         modifiers: [
            {name: 'preventOverflow', options: {padding: 10}}
         ]                      
      })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-8.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-48 rounded-md border border-slate-150 bg-white px-4 py-5 text-center dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="avatar size-16">
              <img
                class="rounded-full"
                src="images/avatar/avatar-8.jpg"
                alt="avatar"
              />
            </div>
            <p
              class="pt-2 text-base font-medium tracking-wide text-slate-700 dark:text-navy-100"
            >
              Katrina West
            </p>
            <a
              href="#"
              class="font-inter tracking-wide hover:text-primary focus:text-primary dark:hover:text-accent-light dark:focus:text-accent-light"
              >@katrinawest
            </a>
            <button
              class="btn mt-4 h-8 rounded-full bg-primary px-4 text-xs+ 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"
            >
              Follow
            </button>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>

Profile Popover

Code

The Popover component is similar to tooltips. The difference is that the popover can contain much more content. Check out code for detail of usage.

Konnor G.

Web Developer

Free

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur.

John D.

UI/UX Designer

Busy

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur.

Simon T.

Fronend Developer

At work

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur.

                
  <div class="flex flex-wrap justify-center space-x-reverse -space-x-2 sm:justify-start">
    <div
      x-data="usePopper({
         offset: 12,
         placement: 'top',
         modifiers: [
            {name: 'preventOverflow', options: {padding: 10}}
         ]                     
      })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-19.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="flex  space-x-reverse space-x-3">
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-19.jpg"
                  alt="avatar"
                />
              </div>
              <div class="flex w-full items-start justify-between">
                <div>
                  <p
                    class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
                  >
                    Konnor G.
                  </p>
                  <p
                    class="text-xs text-primary line-clamp-1 dark:text-accent-light"
                  >
                    Web Developer
                  </p>
                </div>
                <div
                  class="badge h-5  space-x-reverse space-x-1.5 rounded-full bg-success/10 px-1.5 text-success dark:bg-success/15"
                >
                  <div class="size-1.5 rounded-full bg-current"></div>
                  <span>Free</span>
                </div>
              </div>
            </div>
            <p class="pt-2 text-xs text-slate-400 dark:text-navy-300">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Consequuntur.
            </p>
            <div class="flex justify-end  space-x-reverse space-x-1 pt-4">
              <button
                class="btn size-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="usePopper({
       offset: 12,
       placement: 'top',
       modifiers: [
          {name: 'preventOverflow', options: {padding: 10}}
       ]                     
    })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-12.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="flex  space-x-reverse space-x-3">
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-12.jpg"
                  alt="avatar"
                />
              </div>
              <div class="flex w-full items-start justify-between">
                <div>
                  <p
                    class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
                  >
                    John D.
                  </p>
                  <p
                    class="text-xs text-primary line-clamp-1 dark:text-accent-light"
                  >
                    UI/UX Designer
                  </p>
                </div>
                <div
                  class="badge h-5  space-x-reverse space-x-1.5 rounded-full bg-error/10 px-1.5 text-error dark:bg-error/15"
                >
                  <div class="size-1.5 rounded-full bg-current"></div>
                  <span>Busy</span>
                </div>
              </div>
            </div>
            <p class="pt-2 text-xs text-slate-400 dark:text-navy-300">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Consequuntur.
            </p>
            <div class="flex justify-end  space-x-reverse space-x-1 pt-4">
              <button
                class="btn size-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div
      x-data="usePopper({
       offset: 12,
       placement: 'top',
       modifiers: [
          {name: 'preventOverflow', options: {padding: 10}}
       ]                     
    })"
      class="flex"
      @mouseleave="isShowPopper = false"
      @mouseenter="isShowPopper = true"
    >
      <div x-ref="popperRef" class="avatar size-8 hover:z-10">
        <img
          class="rounded-full ring ring-white dark:ring-navy-700"
          src="images/avatar/avatar-20.jpg"
          alt="avatar"
        />
      </div>
      <div
        x-ref="popperRoot"
        class="popper-root"
        :class="isShowPopper && 'show'"
      >
        <div class="popper-box">
          <div
            class="w-72 rounded-md border border-slate-150 bg-white p-3 dark:border-navy-600 dark:bg-navy-700"
          >
            <div class="flex  space-x-reverse space-x-3">
              <div class="avatar size-10">
                <img
                  class="rounded-full"
                  src="images/avatar/avatar-20.jpg"
                  alt="avatar"
                />
              </div>
              <div class="flex w-full items-start justify-between">
                <div>
                  <p
                    class="text-xs+ font-medium text-slate-700 line-clamp-1 dark:text-navy-100"
                  >
                    Simon T.
                  </p>
                  <p
                    class="text-xs text-primary line-clamp-1 dark:text-accent-light"
                  >
                    Fronend Developer
                  </p>
                </div>
                <div
                  class="badge h-5  space-x-reverse space-x-1.5 rounded-full bg-warning/10 px-1.5 text-warning dark:bg-warning/15"
                >
                  <div class="size-1.5 rounded-full bg-current"></div>
                  <span>At work</span>
                </div>
              </div>
            </div>
            <p class="pt-2 text-xs text-slate-400 dark:text-navy-300">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Consequuntur.
            </p>
            <div class="flex justify-end  space-x-reverse space-x-1 pt-4">
              <button
                class="btn size-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="1.5"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                  />
                </svg>
              </button>
              <button
                class="btn size-7 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="size-4.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
                  />
                </svg>
              </button>
            </div>
          </div>
          <div class="size-4" data-popper-arrow>
            <svg
              viewBox="0 0 16 9"
              xmlns="http://www.w3.org/2000/svg"
              class="absolute size-4"
              fill="currentColor"
            >
              <path
                class="text-slate-150 dark:text-navy-600"
                d="M1.5 8.357s-.48.624 2.754-4.779C5.583 1.35 6.796.01 8 0c1.204-.009 2.417 1.33 3.76 3.578 3.253 5.43 2.74 4.78 2.74 4.78h-13z"
              />
              <path
                class="text-white dark:text-navy-700"
                d="M0 9s1.796-.017 4.67-4.648C5.853 2.442 6.93 1.293 8 1.286c1.07-.008 2.147 1.14 3.343 3.066C14.233 9.006 15.999 9 15.999 9H0z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Popover

Basic Popover

UI/UX Design

Advanced Popover

Group Lesson

Form Popover

Select Columns

Profile Popover

Profile Popover