如何在弹性框外显示悬停或工具提示

Posted 2023-03-07

【中文标题】如何在弹性框外显示悬停或工具提示

【英文标题】：How to display a hover or tooltips outside the flex box

【发布时间】：2021-09-21 01:29:34

【问题描述】：

我在这个类中有一个组件

    <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>

上面的工具提示或我拥有的任何东西都不会溢出到其他弹性框。我希望工具提示能够溢出，因为这些框很小。

【参考方案1】：

试试这个例子，

组件

<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

查看Tailwind Play

【讨论】：

谢谢你，我也有溢出：隐藏