Interactive Tooltip Components - Copy this Html, Tailwind Component to your project

<div class="space-y-4"> <h2 class="text-2xl font-semibold text-gray-800">Focus Tooltips</h2> <div class="flex flex-wrap gap-4"> <div class="relative"> <input type="text" placeholder="Focus me" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" aria-describedby="focus-tooltip" /> <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-sm rounded-lg opacity-0 transition-opacity duration-300 whitespace-nowrap focus-within:opacity-100" role="tooltip" id="focus-tooltip">This tooltip appears on focus</div> </div> </div> </div>