溢出滚动x和可见的y

Question

我的问题与此设置有关： https://play.tai​​lwindcss.com/477uvfmgtao

标记名元素，工具提示出现……但是，该行可在x方向上滚动。这是强制性的。 但是，当我设置此溢出行为时，该工具提示在悬停和滚动中看不到……。

我想让工具提示朝y方向溢出，而我可以沿x方向滚动，这是怎么可能的？

正如我所看到的，与答案有关，我的问题并没有导致我的想法。

⭐️我想要的是这种行为：

Answer 1

您需要为Div包装器提供固定宽度，如下所示：

.flex.w-full.flex-row.items-center.gap-x-5.overflow-x-scroll.bg-indigo-100.p-5 {
    height: 150px;
}

这将使工具提示完全可见，并且在Y轴上也不会添加滚筒。

Answer 2

首先，您可以通过在index.css文件中添加此实用程序来隐藏滚动条。

@layer utilities {
    /* Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
    }
}

然后，您只需在Main Div中添加类No-Scrollbar即可。

其次，现在只是垂直滚动以使您的工具提示可见。

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex w-full flex-row items-center gap-x-5 overflow-x-scroll no-scrollbar bg-indigo-100 p-5">
  <div class="group relative rounded bg-white p-2">
    <span>#TagName</span>
    <div class="absolute bottom-0 left-0 translate-y-full scale-0 whitespace-nowrap rounded bg-indigo-500 p-2 text-white group-hover:scale-100 z-20">info panel</div>
  </div>
  <div class="group relative rounded bg-white p-2">
    <span>#TagName</span>
    <div class="absolute bottom-0 left-0 translate-y-full scale-0 whitespace-nowrap rounded bg-indigo-500 p-2 text-white group-hover:scale-100">info panel</div>
  </div>
  <div class="group relative rounded bg-white p-2">
    <span>#TagName</span>
    <div class="absolute bottom-0 left-0 translate-y-full scale-0 whitespace-nowrap rounded bg-indigo-500 p-2 text-white group-hover:scale-100">info panel</div>
  </div>
  <div class="group relative rounded bg-white p-2">
    <span>#TagName</span>
    <div class="absolute bottom-0 left-0 translate-y-full scale-0 whitespace-nowrap rounded bg-indigo-500 p-2 text-white group-hover:scale-100">info panel</div>
  </div>
  <div class="group relative rounded bg-white p-2">
    <span>#TagName</span>
    <div class="absolute bottom-0 left-0 translate-y-full scale-0 whitespace-nowrap rounded bg-indigo-500 p-2 text-white group-hover:scale-100">info panel</div>
  </div>
  <div class="group relative rounded bg-white p-2">
    <span>#TagName</span>
    <div class="absolute bottom-0 left-0 translate-y-full scale-0 whitespace-nowrap rounded bg-indigo-500 p-2 text-white group-hover:scale-100">info panel</div>
  </div>
  <div class="group relative rounded bg-white p-2">
    <span>#TagName</span>
    <div class="absolute bottom-0 left-0 translate-y-full scale-0 whitespace-nowrap rounded bg-indigo-500 p-2 text-white group-hover:scale-100">info panel</div>
  </div>
  <div class="group relative rounded bg-white p-2">
    <span>#TagName</span>
    <div class="absolute bottom-0 left-0 translate-y-full scale-0 whitespace-nowrap rounded bg-indigo-500 p-2 text-white group-hover:scale-100">info panel</div>
  </div>
  <div class="group relative rounded bg-white p-2">
    <span>#TagName</span>
    <div class="absolute bottom-0 left-0 translate-y-full scale-0 whitespace-nowrap rounded bg-indigo-500 p-2 text-white group-hover:scale-100">info panel</div>
  </div>
</div>