tailwindcss .tooltip

1 개요[ | ]

tailwindcss .tooltip
<div class="h-screen w-screen p-8 dark:bg-black">

<div class="tooltip">
  <div class="p-2 border">TOP</div>
  <span class="tooltiptext top">hello world</span>
</div>
<div class="tooltip">
  <div class="p-2 border">BOTTOM</div>
  <span class="tooltiptext bottom">hello world</span>
</div>
<div class="tooltip">
  <div class="p-2 border">LEFT</div>
  <span class="tooltiptext left">hello world</span>
</div>
<div class="tooltip">
  <div class="p-2 border">RIGHT</div>
  <span class="tooltiptext right">hello world</span>
</div>

<br /><br /><br /><button onclick="document.documentElement.classList.toggle('dark')" class="p-2 border">dark</button></div>
<script src="https://cdn.tailwindcss.com"></script><script>tailwind.config={darkMode:'class'}</script>
<style type="text/tailwindcss">
@layer base {*,::before,::after{@apply dark:text-white border-gray-300 dark:border-gray-600;}}

.tooltip {
  @apply relative inline-block cursor-default;
  &:hover .tooltiptext { @apply visible; }
}
.tooltiptext {
  @apply invisible w-[120px] bg-gray-500 text-white text-center py-1 absolute z-10 rounded-md;
  &::after {
    @apply absolute border-transparent border-8;
    content: '';
  }
}
.top {
  @apply bottom-full left-1/2 -translate-x-1/2 mb-2;
  &::after { @apply top-full left-1/2 -ml-2 border-t-gray-500; }
}
.bottom {
  @apply top-full left-1/2 -translate-x-1/2 mt-2;
  &::after { @apply bottom-full left-1/2 -ml-2 border-b-gray-500; }
}
.left {
  @apply top-1/2 right-full -translate-y-1/2 mr-2;
  &::after { @apply top-1/2 left-full -mt-2 border-l-gray-500; }
}
.right {
  @apply top-1/2 left-full -translate-y-1/2 ml-2;
  &::after { @apply top-1/2 right-full -mt-2 border-r-gray-500; }
}
</style>
2 같이 보기[ | ]
