YNEX - Tailwind Admin Template

Default Popovers


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
      <div class="hs-tooltip ti-main-tooltip [--trigger:click]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-primary me-2" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 !rounded-t-md !py-2  !px-4 text-defaulttextcolor border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
        </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-primary me-2" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 !rounded-t-md !py-2  !px-4 text-defaulttextcolor border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:bottom]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-primary me-2" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 !rounded-t-md !py-2  !px-4 text-defaulttextcolor border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
        </div>
        <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:left]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-primary me-2" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 !rounded-t-md !py-2  !px-4 text-defaulttextcolor border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
        </div>
    </div>

Colored Headers


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-primary me-2" href="javascript:void(0);">Header Primary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-primary !rounded-t-md !py-2  !px-4 text-white border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor  !text-[0.8rem] !py-4 !px-4 text-start">Popover With Primary Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-secondary me-2" href="javascript:void(0);">Header Secondary
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-secondary !py-2 !rounded-t-md !px-4 text-white border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Secondary Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:bottom]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-info me-2" href="javascript:void(0);">Header Info
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-info !py-2 !px-4 !rounded-t-md text-white border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With Info Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:left]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-warning me-2" href="javascript:void(0);">Header warning
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-warning !py-2 !px-4 !rounded-t-md text-white border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With warning Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-success me-2" href="javascript:void(0);">Header succuss
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-success !py-2 !px-4 text-white !rounded-t-md border-defaultborder text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With succuss Header</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-outline-danger me-2" href="javascript:void(0);">Header danger
              <div class="hs-tooltip-content ti-main-tooltip-content dark:bg-bodybg !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-defaultborder/10 bg-danger !py-2 !px-4 text-white border-defaultborder !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color Header</h6>
                  </div>
                  <p class="!text-defaulttextcolor !text-[0.8rem] !py-4 !px-4 text-start">Popover With danger Header</p>
              </div>
            </a>
      </div>
    </div>

Colored Popovers


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
      <div class="hs-tooltip ti-main-tooltip  [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-primary-full me-2" href="javascript:void(0);">Primary
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-primary !z-[1000] !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-white/10 !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Primary Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With primary background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-secondary-full me-2" href="javascript:void(0);">Secondary
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-secondary !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b !border-solid dark:border-white/10 !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Secondary Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With secondary background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-info-full me-2" href="javascript:void(0);">Info
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-secondary  !p-0 !max-w-[276px]  !border-white/10" role="tooltip">
                  <div  class="!border-b dark:border-white/10 !border-solid !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Info Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With info background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-warning-full me-2" href="javascript:void(0);">Warning
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-warning  !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b dark:border-white/10 !border-solid !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Warning Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With warning background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-success-full me-2" href="javascript:void(0);">Success
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-success  !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b dark:border-white/10 !border-solid !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Success Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With success background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-danger-full me-2" href="javascript:void(0);">Danger
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-danger  !p-0 !max-w-[276px] !border-white/10" role="tooltip">
                  <div  class="!border-b dark:border-white/10 !border-solid !py-2 !px-4 text-white border-white/10 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Danger Color background</h6>
                  </div>
                  <p class="!text-white !text-[0.8rem] !py-4 !px-4 text-start">Popover With danger background</p>
              </div>
            </a>
      </div>
    </div>

Light Popovers


    <div class="ti-btn-list space-x-2 rtl:space-x-reverse">
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top] ">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-primary me-2" href="javascript:void(0);">Primary
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-primary/10 !z-[1000] !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-primary !border-primary/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-primary !text-[0.8rem] !py-4 !px-4 text-start">Popover With primary background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-secondary me-2" href="javascript:void(0);">Secondary
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-secondary/10 !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-secondary !border-secondary/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-secondary !text-[0.8rem] !py-4 !px-4 text-start">Popover With secondary background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-info me-2" href="javascript:void(0);">Info
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-info/10  !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-info !border-info/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-info !text-[0.8rem] !py-4 !px-4 text-start">Popover With info background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-warning me-2" href="javascript:void(0);">Warning
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-warning/10  !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-warning !border-warning/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-warning !text-[0.8rem] !py-4 !px-4 text-start">Popover With warning background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-success me-2" href="javascript:void(0);">Success
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-success/10  !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-success !border-success/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-success !text-[0.8rem] !py-4 !px-4 text-start">Popover With success background</p>
              </div>
            </a>
      </div>
      <div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:right]">
          <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-danger me-2" href="javascript:void(0);">danger
              <div class="hs-tooltip-content ti-main-tooltip-content !bg-danger/10  !p-0 !max-w-[276px]" role="tooltip">
                  <div  class="!border-b !border-solid !py-2 !px-4 text-danger !border-danger/20 !rounded-t-md text-start w-full text-[1rem]">
                  <h6>Color background</h6>
                  </div>
                  <p class="!text-danger !text-[0.8rem] !py-4 !px-4 text-start">Popover With danger background</p>
              </div>
            </a>
      </div>
    </div>

Disabled Popover

<div class="hs-tooltip ti-main-tooltip [--trigger:click] [--placement:top]">
    <a class="hs-tooltip-toggle ti-main-tooltip-toggle ti-btn ti-btn-primary-full opacity-60" href="javascript:void(0);">
        Disabled button
      <div class="hs-tooltip-content ti-main-tooltip-content" role="tooltip">
       Diabled Popover
      </div>
    </a>
  </div>

Icon Popovers


    <div class="hs-tooltip ti-main-tooltip me-6 !max-w-[276px] [--trigger:click] [--placement:top]">
      <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:void(0);">
          <svg xmlns="http://www.w3.org/2000/svg" class="svg-primary" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
        <div class="hs-tooltip-content ti-main-tooltip-content !py-4 !px-4 !bg-primary !text-white" role="tooltip">
         <p>The Icon Popover</p>
        </div>
      </a>
    </div>
    <div class="hs-tooltip ti-main-tooltip !max-w-[276px] [--trigger:click] [--placement:left]">
    <a class="hs-tooltip-toggle ti-main-tooltip-toggle" href="javascript:void(0);">
      <svg xmlns="http://www.w3.org/2000/svg" class="fill-secondary" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
      <div class="hs-tooltip-content ti-main-tooltip-content !bg-secondary !text-white !py-4 !px-4" role="tooltip">
          <p>The Icon Popover</p>
    </div>
    </a>
    </div>

Switcher

Popovers

Popover Top

Popover Right

Popover Bottom

Popover Left

Color Header

Color Header

Color Header

Color Header

Color Header

Color Header

Primary Color background

Secondary Color background

Info Color background

Warning Color background

Success Color background

Danger Color background

Color background

Color background

Color background

Color background

Color background

Color background