galaxy/Tooltips/csemszepp_ordinary-owl-54.html

<div class="container">
  <div id="wrapper">
    <header>
      <div class="iconDiv" tabindex="0">
        <div class="iconSVG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"
            ></path>
          </svg>
        </div>
        <span class="text">Load File</span>
      </div>
      <div class="iconDiv" tabindex="0">
        <div class="iconSVG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
            ></path>
          </svg>
        </div>
        <span class="text">Download</span>
      </div>
      <div class="spacer"></div>
      <div class="divider"></div>
      <div class="iconDiv" tabindex="0">
        <div class="iconSVG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
            ></path>
          </svg>
        </div>
        <span class="text">Notifications</span>
      </div>
      <div class="iconDiv" tabindex="0">
        <div class="iconSVG">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="1"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
        </div>
        <span class="text">Log out </span>
      </div>
    </header>
  </div>
</div>

<style>
/* From Uiverse.io by csemszepp  - Website: https://codepen.io/Adir-SL - Name: Adir - Tags: tooltip, animation, minimalist */
.container {
  background-color: black;
  color: rgb(132, 170, 218);
  font-family: "Inter", sans-serif;
  font-size: 14px;
}
.container::before {
  content: "Hover or tap the icons.";
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: calc(50% - 100px);
  transform: translate(-50%, -50%);
}
.container::after {
  position: absolute;
  bottom: 36px;
  right: 36px;
}
#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}
header {
  width: 340px;
  padding: 0 16px;
  display: flex;
  border: 1px solid rgb(83, 100, 124);
  border-radius: 16px;
}
.iconDiv {
  height: 36px;
  width: 36px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 4px;
  padding: 4px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: width 300ms ease-in-out 0s, background-color 300ms linear 200ms;
}
.iconSVG {
  height: 36px;
  aspect-ratio: 1 / 1;
}
.iconDiv:hover,
.iconDiv:focus-visible {
  width: 142px;
  background-color: rgb(34, 52, 77);
  transition: width 300ms ease-in-out 0s, background-color 100ms linear 0s;
}
.iconDiv:focus-visible {
  outline: 1px solid rgb(34, 52, 77);
  outline-offset: 4px;
}
.iconDiv:active {
  opacity: 0.9;
}
.iconDiv::after {
  content: attr(tooltip);
  margin-left: 12px;
  animation: fadeIn 600ms linear forwards;
}
.spacer {
  flex-grow: 1;
}
.divider {
  height: 36px;
  width: 1px;
  margin: 24px 18px;
  background-color: rgb(83, 100, 124);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.text {
  padding-left: 10px;
}

</style>