Implements Tooltip Box Using Tailwind UI
An implement-tooltip-box created with Tailwind enhances user experience by providing informative tooltips within your content, making it more interactive and informative.
tooltips
Loading component...
113 lines
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet"
/>
<style>
.body {
font-family: "Plus Jakarta Sans", sans-serif;
}
</style>
<section
class="flex flex-col items-center justify-center w-screen h-screen space-y-4">
<div class="relative flex items-center group">
<svg
class="w-12 h-12"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
<div
class="absolute left-0 items-center hidden ml-14 group-hover:flex"
>
<div class="w-3 h-3 -mr-2 rotate-45 bg-black"></div>
<span
class="relative z-10 px-8 py-4 text-sm leading-none text-white whitespace-no-wrap bg-black rounded-lg shadow-lg w-96"
>
A clear and consisce tooltip message here!
</span>
</div>
</div>
<div class="relative flex items-center group">
<svg
class="w-12 h-12"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
<div
class="absolute right-0 items-center hidden mr-14 group-hover:flex"
>
<span
class="relative z-10 px-8 py-4 text-sm leading-none text-white whitespace-no-wrap bg-black rounded-lg shadow-lg w-96"
>
A clear and consisce tooltip message here!
</span>
<div class="w-3 h-3 -ml-2 rotate-45 bg-black"></div>
</div>
</div>
<div class="relative flex flex-col items-center group">
<svg
class="w-12 h-12"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
<div
class="absolute bottom-0 items-center hidden -mb-14 group-hover:flex-col group-hover:flex"
>
<div class="w-3 h-3 -mb-2 rotate-45 bg-black"></div>
<span
class="relative z-10 px-8 py-4 text-sm leading-none text-white whitespace-no-wrap bg-black rounded-lg shadow-lg w-96"
>
A clear and consisce tooltip message here!
</span>
</div>
</div>
<div class="relative flex flex-col items-center group">
<div
class="absolute bottom-0 items-center hidden mb-8 group-hover:flex-col group-hover:flex"
>
<span
class="relative z-10 px-10 py-4 text-sm leading-none text-white whitespace-no-wrap bg-black rounded-lg shadow-lg w-96"
>
A clear and consisce tooltip message here!
</span>
<div class="w-3 h-3 -mt-2 rotate-45 bg-black"></div>
</div>
<svg
class="w-12 h-12 -mb-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
</div>
</section>