Tooltip by sahilxkhadka
This tooltip was created for Tooltip Challenge
#e8e8e8
HTML +TailwindCSS
1<button 2 class="group relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800" 3> 4 <span 5 class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0" 6 > 7 Hover For Tooltip 8 </span> 9 <div class="hidden group-hover:block"> 10 <div 11 class="group absolute -top-12 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center rounded-sm text-center text-sm text-slate-300 before:-top-2" 12 > 13 <div class="rounded-sm bg-black py-1 px-2"> 14 <p class="whitespace-nowrap">This is a tooltip.</p> 15 </div> 16 <div 17 class="h-0 w-fit border-l-8 border-r-8 border-t-8 border-transparent border-t-black" 18 ></div> 19 </div> 20 </div> 21</button> 22
3.2K views
3.2K views
Variations
1 MIT License