How to display a hover or tooltips outside the flex box

user_901790 0
Viewed 1246

I have a component inside this class

    <div class="flex flex-wrap -m-4">
      <div  class="p-4 lg:w-1/3">
        whatever component here
      </div>

      <div  class="p-4 lg:w-1/3">
        <div class="flex items-center justify-items-start pt-2">
               <span class='tooltip rounded shadow-lg p-1 bg-gray-800 text-gray-400 -mt-8 h-auto w-auto  bg-opacity-90'>
           </span>
        </div>
      </div>
   </div>

The above tooltip or anything I have does not overflow to other flex boxes. I would like for the tooltip to be able to be overflow as these boxes are small.

tailwind-css angular
1 Answers

Try this example,

Component

<div class="flex flex-wrap m-10">
  <div  class="p-4 lg:w-1/3">
    whatever component here
  </div>

  <div  class="p-4 lg:w-1/3">
    <div class='has-tooltip'>
      <span class='tooltip rounded shadow-lg p-1 bg-gray-100 text-red-500 -mt-8'>I'm Tooltip :)</span>
      Click me!
    </div>
    </div>
  </div>

CSS

@tailwind base;
@tailwind components;
@tailwind utilities;


.tooltip {
  @apply invisible absolute;
}

.has-tooltip:hover .tooltip {
  @apply visible z-50
}

Check on Tailwind Play

user_46340600
Related