tailwindcss .btn-group × .tooltip

1 개요[ | ]

tailwindcss .btn-group × .tooltip

html

Copy

<div class="h-screen w-screen p-4 dark:bg-black">

<div class="btn-group">
  <button>apple</button>
  <div class="tooltip">
   <button>banana</button>
   <span class="tooltiptext bottom">hello world</span>
  </div>
  <button>cranberry</button>
</div>

<br /><br /><br /><button onclick="document.documentElement.classList.toggle('dark')" class="p-1 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;}}

.btn-group {
  @apply inline-flex;
}
.btn-group > * {
  @apply border-y bg-white px-4 py-2 hover:bg-gray-100 focus:z-10 focus:ring-2 focus:ring-gray-200 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700;
}
.btn-group > *:first-child {
  @apply rounded-s-md border;
}
.btn-group > *:last-child {
  @apply rounded-e-md border;
}

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

▶	cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation

2 같이 보기[ | ]