I’m trying to create a hover message within a span. For example, when we hover over the first span (parent span) its child span is shown. That’s working fine but the child span is not taking auto width. Here is the code I have tried
<span class="group/item relative ml-2 h-6 w-6 bg-yellow-300">
Hover me
<span class="absolute top-7 right-auto z-10 hidden w-auto rounded-md bg-gray-900 px-3 py-1 text-[10px] text-white group-hover/item:block"> Create payment </span>
</span>
This code gives this result
I want this result
Please note that I want to get this result with w-auto
>Solution :
Add whitespace-nowrap class on you children span which will prevent text from breaking after white spaces. Your span is taking width auto as expected it’s just that default behavior of text is to break itself after a white space if there is no width left
<script src="https://cdn.tailwindcss.com"></script>
<span class="group/item relative ml-2 h-6 w-6 bg-yellow-300">
Hover me
<span class="absolute top-7 right-auto z-10 hidden w-auto rounded-md bg-gray-900 px-3 py-1 text-[10px] text-white group-hover/item:block whitespace-nowrap"> Create payment </span>
</span>