Tooltips
<!-- 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>
New Project
<!-- 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>
New Project
<!-- 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>
New Project
<!-- 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>
New Project
<!-- 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>
Click here to add a new project