Basic Tooltips - Tailwind Component
Tooltips provide additional information upon hover or click, it is use Tailwind CSS to create this beautiful tooltips tailwind component.
tooltips
Loading component...
48 lines
<section class="flex items-center justify-center">
<div class="items-center py-24 bg-purple-200 min-h-screen min-w-full space-y-8">
<div class="flex flex-col items-center">
<span
class="relative z-30 p-3 text-sm leading-none font-medium rounded text-gray-600 whitespace-no-wrap bg-gray-50">A
clear and consisce tooltip message here!</span>
<div class="w-4 h-4 -mt-2 rotate-45 bg-gray-50"></div>
</div>
<div class="flex flex-col items-center">
<span
class="relative z-30 p-3 text-sm leading-none font-medium rounded text-gray-300 whitespace-no-wrap bg-gray-800">A
clear and consisce tooltip message here!</span>
<div class="w-4 h-4 -mt-2 mr-56 rotate-45 bg-gray-800"></div>
</div>
<div class="flex flex-col items-center">
<span
class="relative z-30 p-3 text-sm leading-none font-medium rounded text-gray-300 whitespace-no-wrap bg-gray-600">A
clear and consisce tooltip message here!</span>
<div class="w-4 h-4 -mt-2 ml-56 rotate-45 bg-gray-600"></div>
</div>
<div class="flex flex-col items-center">
<div class="w-4 h-4 -mb-2 rotate-45 bg-indigo-600"></div>
<span
class="relative z-30 p-3 text-sm leading-none font-medium rounded text-gray-300 whitespace-no-wrap bg-indigo-600">A
clear and consisce tooltip message here!</span>
</div>
<div class="flex flex-col items-center">
<span
class="relative z-30 p-3 text-sm leading-none font-medium rounded text-gray-800 whitespace-no-wrap bg-gray-50">A
clear and consisce tooltip message here!</span>
<div class="w-4 h-4 mr-[380px] -mt-7 rotate-45 bg-gray-50"></div>
</div>
<div class="flex flex-col items-center">
<span
class="relative z-30 p-3 text-sm leading-none font-medium rounded text-gray-800 whitespace-no-wrap bg-gray-50">A
clear and consisce tooltip message here!</span>
<div class="w-4 h-4 ml-[378px] -mt-7 rotate-45 bg-gray-50"></div>
</div>
</div>
</section>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap');
body {
font-family: 'Fira Mono', monospace;
}
</style>