Myna UI

Tooltips

Top

Last Edited on January 25, 2022

<!-- Position tooltip using popper -->
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
  <div
    role="tooltip"
    class="relative max-w-xs break-words rounded bg-gray-800 px-3 py-2 text-center text-xs font-medium text-gray-300 shadow-lg outline-none">
    <!-- Position arrow using popper -->
    <svg
      class="absolute fill-gray-800"
      width="10"
      height="5"
      viewBox="0 0 30 10"
      style="transform: translate3d(30px, -13px, 0px)"
      preserveAspectRatio="none">
      <polygon points="15,0 30,10 0,10"></polygon>
    </svg>
    <span>New Project</span>
  </div>
</div>

<svg class="h-6 w-6 stroke-gray-500" viewBox="0 0 256 256">
  <circle
    cx="128"
    cy="128"
    r="96"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></circle>
  <circle cx="128" cy="180" r="12" class="fill-gray-500"></circle>
  <path
    d="M128,144v-8a28,28,0,1,0-28-28"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></path>
</svg>

Bottom

Last Edited on January 25, 2022

<!-- Position tooltip using popper -->
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
  <div
    role="tooltip"
    class="relative max-w-xs break-words rounded bg-gray-800 px-3 py-2 text-center text-xs font-medium text-gray-300 shadow-lg outline-none">
    <!-- Position arrow using popper -->
    <svg
      class="absolute fill-gray-800"
      width="10"
      height="5"
      viewBox="0 0 30 10"
      style="transform: translate3d(30px, 24px, 0px)"
      preserveAspectRatio="none">
      <polygon points="0,0 30,0 15,10"></polygon>
    </svg>
    <span>New Project</span>
  </div>
</div>

<svg class="h-6 w-6 stroke-gray-500" viewBox="0 0 256 256">
  <circle
    cx="128"
    cy="128"
    r="96"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></circle>
  <circle cx="128" cy="180" r="12" class="fill-gray-500"></circle>
  <path
    d="M128,144v-8a28,28,0,1,0-28-28"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></path>
</svg>

Right

Last Edited on January 25, 2022

<!-- Position tooltip using popper -->
<div class="absolute left-1/2 top-1/2 -translate-y-1/2 translate-x-1/4">
  <div
    role="tooltip"
    class="relative max-w-xs break-words rounded bg-gray-800 px-3 py-2 text-center text-xs font-medium text-gray-300 shadow-lg outline-none">
    <!-- Position arrow using popper -->
    <svg
      class="absolute fill-gray-800"
      width="5"
      height="8"
      viewBox="0 0 30 10"
      style="transform: translate3d(-17px, 4px, 0px)"
      preserveAspectRatio="none">
      <polygon points="30,0 30,10 0,5"></polygon>
    </svg>
    <span>New Project</span>
  </div>
</div>

<svg class="h-6 w-6 stroke-gray-500" viewBox="0 0 256 256">
  <circle
    cx="128"
    cy="128"
    r="96"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></circle>
  <circle cx="128" cy="180" r="12" class="fill-gray-500"></circle>
  <path
    d="M128,144v-8a28,28,0,1,0-28-28"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></path>
</svg>

Left

Last Edited on January 25, 2022

<!-- Position tooltip using popper -->
<div class="absolute left-1/2 top-1/2 -translate-y-1/2 translate-x-[-125%]">
  <div
    role="tooltip"
    class="relative max-w-xs break-words rounded bg-gray-800 px-3 py-2 text-center text-xs font-medium text-gray-300 shadow-lg outline-none">
    <!-- Position arrow using popper -->
    <svg
      class="absolute fill-gray-800"
      width="5"
      height="8"
      viewBox="0 0 30 10"
      style="transform: translate3d(82px, 4px, 0px)"
      preserveAspectRatio="none">
      <polygon points="0,0 30,5 0,10"></polygon>
    </svg>
    <span>New Project</span>
  </div>
</div>

<svg class="h-6 w-6 stroke-gray-500" viewBox="0 0 256 256">
  <circle
    cx="128"
    cy="128"
    r="96"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></circle>
  <circle cx="128" cy="180" r="12" class="fill-gray-500"></circle>
  <path
    d="M128,144v-8a28,28,0,1,0-28-28"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></path>
</svg>

Without Tip

Last Edited on January 25, 2022

<!-- Position tooltip using popper -->
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
  <div
    role="tooltip"
    class="relative max-w-xs break-words rounded bg-gray-800 px-3 py-2 text-center text-xs font-medium text-gray-300 shadow-lg outline-none">
    Click here to add a new project
  </div>
</div>

<svg class="h-6 w-6 stroke-gray-500" viewBox="0 0 256 256">
  <circle
    cx="128"
    cy="128"
    r="96"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></circle>
  <circle cx="128" cy="180" r="12" class="fill-gray-500"></circle>
  <path
    d="M128,144v-8a28,28,0,1,0-28-28"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="16"></path>
</svg>