| Tooltip Name | Tooltip Output | HTML | |
|---|---|---|---|
| Tooltip top | Tool Tip on Top |
<div className="group relative flex max-w-max flex-col items-center justify-center">
<i class="ri-information-fill text-sm text-[#5a5a5a]"></i>
<div className="absolute whitespace-normal w-[120px] left-1/2 z-[999]
[box-shadow:0px_0px_4px_0px_#00000025] bottom-[34px] ml-auto mr-auto
-translate-x-1/2 scale-0 transform rounded-lg text-xs
font-medium transition-all duration-500 group-hover:scale-100">
<div className="flex rounded-lg max-w-xs flex-col items-center relative">
<div className="rounded shadow text-gray-800 p-2 text-center text-xs
bg-white after:bg-white after:content-['']
after:bottom-[-5px] after:[box-shadow:-3px_-2px_8px_-2px_#00000080]
after:left-[46%] after:rotate-[220deg] after:block after:absolute after:w-[10px] after:h-[10px]">
Tool Tip on Top
</div>
</div>
</div>
</div>
| |
| Tooltip Bottom | Tool Tip on Bottom |
<div className="group relative flex max-w-max flex-col items-center justify-center">
<i class="ri-information-fill text-sm text-[#5a5a5a]"></i>
<div className="absolute whitespace-normal w-[120px] left-1/2 z-[999]
[box-shadow:0px_0px_4px_0px_#00000025] top-[34px] ml-auto mr-auto
-translate-x-1/2 scale-0 transform rounded-lg text-xs font-medium
transition-all duration-500 group-hover:scale-100">
<div className="flex rounded-lg max-w-xs flex-col items-center relative">
<div className="rounded shadow text-gray-800 p-2 text-center text-xs
bg-white after:bg-white after:content-[''] after:top-[-5px]
after:[box-shadow:-3px_-2px_8px_-2px_#00000080] after:left-[46%]
after:rotate-[45deg] after:block after:absolute after:w-[10px] after:h-[10px]">
Tool Tip on Bottom
</div>
</div>
</div>
</div>
| |
| Tooltip Left | Tool Tip on Left |
<div className="group relative flex max-w-max flex-col items-center justify-center">
<i class="ri-information-fill text-sm text-[#5a5a5a]"></i>
<div className="absolute whitespace-normal w-[120px] left-[-75px] z-[999]
[box-shadow:0px_0px_4px_0px_#00000025] ml-auto mr-auto
-translate-x-1/2 scale-0 transform rounded-lg text-xs
font-medium transition-all duration-500 group-hover:scale-100">
<div className="flex rounded-lg max-w-xs flex-col items-center relative">
<div className="rounded w-full shadow text-gray-800 p-2 text-center
text-xs bg-white after:bg-white after:content-['']
after:right-[-5px] after:bottom-[35%]
after:[box-shadow:-3px_-2px_8px_-2px_#00000080] after:rotate-[127deg]
after:block after:absolute after:w-[10px] after:h-[10px]">
Tool Tip on Left
</div>
</div>
</div>
</div>
| |
| Tooltip Right | Tool Tip on Right |
<div className="group relative flex max-w-max flex-col items-center justify-center">
<i class="ri-information-fill text-sm text-[#5a5a5a]"></i>
<div className="absolute whitespace-normal w-[120px] right-[-20px]
z-[999] [box-shadow:0px_0px_4px_0px_#00000025] bottom-[-8px] ml-auto mr-auto
translate-x-full scale-0 transform rounded-lg text-xs font-medium
transition-all duration-500 group-hover:scale-100">
<div className="flex rounded-lg max-w-xs flex-col items-center relative">
<div className="rounded w-full shadow text-gray-800 p-2 text-center
text-xs bg-white after:bg-white after:content-[''] after:bottom-[35%]
after:[box-shadow:-3px_-2px_8px_-2px_#00000080] after:left-[-5px]
after:rotate-[320deg] after:block after:absolute after:w-[10px] after:h-[10px]">
Tool Tip on Right
</div>
</div>
</div>
</div>
|
| Tooltip with Detail Name | Tooltip with Detail Output | HTML | |
|---|---|---|---|
| Tooltip With Detail | Tool Tip on Top The users wants to find a specific page or site. |
<div className="group relative flex max-w-max flex-col items-center justify-center">
<i class="ri-information-fill text-sm text-[#5a5a5a]"></i>
<div className="absolute whitespace-normal w-[200px] left-1/2 z-[999]
[box-shadow:0px_0px_4px_0px_#00000025] bottom-[34px] ml-auto mr-auto
-translate-x-1/2 scale-0 transform rounded-lg text-xs
font-medium transition-all duration-500 group-hover:scale-100">
<div className="flex rounded-lg max-w-xs flex-col items-center relative">
<div className="rounded shadow text-gray-800 p-2 text-left
text-xs bg-white after:bg-white after:content-['']
after:bottom-[-5px] after:[box-shadow:-3px_-2px_8px_-2px_#00000080]
after:left-[46%] after:rotate-[220deg] after:block after:absolute
after:w-[10px] after:h-[10px]">
Tool Tip on Top
<p className="text-xs font-regular text-left">
The users wants to find a specific page or site.
</p>
</div>
</div>
</div>
</div>
| |
| Tooltip With Detail Bottom | Tool Tip on Bottom The users wants to find a specific page or site. |
<div className="group relative flex max-w-max flex-col items-center justify-center">
<i class="ri-information-fill text-sm text-[#5a5a5a]"></i>
<div className="absolute whitespace-normal w-[200px] left-1/2 z-[999]
[box-shadow:0px_0px_4px_0px_#00000025] top-[34px] ml-auto mr-auto
-translate-x-1/2 scale-0 transform rounded-lg text-xs font-medium
transition-all duration-500 group-hover:scale-100">
<div className="flex rounded-lg max-w-xs flex-col items-center relative">
<div className="rounded shadow text-gray-800 p-2 text-left text-xs
bg-white after:bg-white after:content-[''] after:top-[-5px]
after:[box-shadow:-3px_-2px_8px_-2px_#00000080] after:left-[46%]
after:rotate-[45deg] after:block after:absolute after:w-[10px] after:h-[10px]">
Tool Tip on Bottom
<p className="text-xs font-regular text-left">
The users wants to find a specific page or site.
</p>
</div>
</div>
</div>
</div>
| |
| Tooltip With Detail Left | Tool Tip on Left The users wants to find a specific page or site. |
<div className="group relative flex max-w-max flex-col items-center justify-center">
<i class="ri-information-fill text-sm text-[#5a5a5a]"></i>
<div className="absolute whitespace-normal w-[200px] left-[-15px] z-[999]
[box-shadow:0px_0px_4px_0px_#00000025] ml-auto mr-auto -translate-x-full
scale-0 transform rounded-lg text-xs font-medium transition-all duration-500 group-hover:scale-100">
<div className="flex rounded-lg max-w-xs flex-col items-center relative">
<div className="rounded w-full shadow text-gray-800 p-2 text-left
text-xs bg-white after:bg-white after:content-[''] after:right-[-5px]
after:bottom-[43%] after:[box-shadow:-3px_-2px_8px_-2px_#00000080]
after:rotate-[127deg] after:block after:absolute after:w-[10px] after:h-[10px]">
Tool Tip on Left
<p className="text-xs font-regular text-left">
The users wants to find a specific page or site.
</p>
</div>
</div>
</div>
</div>
| |
| Tooltip With Detail Right | Tool Tip on Right The users wants to find a specific page or site. |
<div className="group relative flex max-w-max flex-col items-center justify-center">
<i class="ri-information-fill text-sm text-[#5a5a5a]"></i>
<div className="absolute whitespace-normal w-[200px] right-[-20px] z-[999]
[box-shadow:0px_0px_4px_0px_#00000025] bottom-[-30px] ml-auto mr-auto
translate-x-full scale-0 transform rounded-lg text-xs font-medium
transition-all duration-500 group-hover:scale-100">
<div className="flex rounded-lg max-w-xs flex-col items-center relative">
<div className="rounded w-full shadow text-gray-800 p-2 text-left text-xs
bg-white after:bg-white after:content-[''] after:bottom-[49%]
after:[box-shadow:-3px_-2px_8px_-2px_#00000080] after:left-[-5px]
after:rotate-[320deg] after:block after:absolute after:w-[10px] after:h-[10px]">
Tool Tip on Right
<p className="text-xs font-regular text-left">
The users wants to find a specific page or site.
</p>
</div>
</div>
</div>
</div>
|