Tooltip by ayman-ashine
#e8e8e8
HTML +TailwindCSS
1<div class="flex flex-col items-center gap-2"> 2 <div class="group relative bg-zinc-300 p-2 rounded-full"> 3 <span>Top</span> 4 <div 5 class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute -top-2 -translate-y-full left-1/2 -translate-x-1/2" 6 > 7 <span class="text-zinc-400 whitespace-nowrap">Info</span> 8 <div 9 class="bg-inherit rotate-45 p-1 absolute bottom-0 translate-y-1/2 left-1/2 -translate-x-1/2" 10 ></div> 11 </div> 12 </div> 13 14 <div class="group relative bg-zinc-300 p-2 rounded-full"> 15 <span>Left</span> 16 <div 17 class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute top-1/2 -translate-y-1/2 -left-2 -translate-x-full" 18 > 19 <span class="text-zinc-400 whitespace-nowrap">Info</span> 20 <div 21 class="bg-inherit rotate-45 p-1 absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2" 22 ></div> 23 </div> 24 </div> 25 26 <div class="group relative bg-zinc-300 p-2 rounded-full"> 27 <span>Right</span> 28 <div 29 class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute top-1/2 -translate-y-1/2 -right-2 translate-x-full" 30 > 31 <span class="text-zinc-400 whitespace-nowrap">Info</span> 32 <div 33 class="bg-inherit rotate-45 p-1 absolute top-1/2 -translate-y-1/2 left-0 -translate-x-1/2" 34 ></div> 35 </div> 36 </div> 37 38 <div class="group relative bg-zinc-300 p-2 rounded-full"> 39 <span>Bottom</span> 40 <div 41 class="bg-zinc-800 p-2 rounded-md group-hover:flex hidden absolute -bottom-2 translate-y-full left-1/2 -translate-x-1/2" 42 > 43 <span class="text-zinc-400 whitespace-nowrap">Info</span> 44 <div 45 class="bg-inherit rotate-45 p-1 absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2" 46 ></div> 47 </div> 48 </div> 49</div> 50
1.5K views
1.5K views
MIT License