[tooltip-top] {
  position: relative;
  cursor: pointer;
}
[tooltip-top]::after {
  content: attr(tooltip-title);

  opacity: 0;

  background: #222;
  border-radius: 4px;
  color: #fff;
  margin-bottom: 5px;
  padding: 2px 5px;
  white-space: nowrap;
  z-index: 10;

  position: absolute;
  bottom: 100%;
  left: 50%;

  transition: all 0.2s ease-out 0.2s;
  transform: translate(-50%, 10px);
  transform-origin: top;
}
[tooltip-top]::before {
  content: "";
  opacity: 0;

  width: 0px;
  height: 0px;
  border-top: 5px solid #222;
  border-bottom: 5px solid none;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  white-space: nowrap;
  z-index: 10;

  position: absolute;
  bottom: 100%;
  left: 50%;

  transition: all 0.2s ease-out 0.2s;
  transform: translate(-50%, 10px);
  transform-origin: top;
}

[tooltip-top]:hover::after,
[tooltip-top]:hover::before {
  opacity: 1;
}
[tooltip-top]:hover::after,
[tooltip-top]:hover::before {
  transform: translate(-50%, 0);
}
/* 아래 툴팁 */
[tooltip-bottom] {
  position: relative;
  cursor: pointer;
}

[tooltip-bottom]::after {
  content: attr(tooltip-title);

  opacity: 0;

  background: #222;
  border-radius: 4px;
  color: #fff;
  margin-top: 5px;
  padding: 2px 5px;
  white-space: nowrap;
  z-index: 10;

  position: absolute;
  top: 100%;
  left: 50%;

  transition: all 0.2s ease-out 0.2s;
  transform: translate(-50%, -10px);
  transform-origin: top;
}
[tooltip-bottom]::before {
  content: "";
  opacity: 0;

  width: 0px;
  height: 0px;
  border-top: 5px solid none;
  border-bottom: 5px solid #222;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  white-space: nowrap;
  z-index: 10;

  position: absolute;
  top: 100%;
  left: 50%;

  transition: all 0.2s ease-out 0.2s;
  transform: translate(-50%, -10px);
  transform-origin: top;
}

[tooltip-bottom]:hover::after,
[tooltip-bottom]:hover::before {
  opacity: 1;
}

[tooltip-bottom]:hover::after,
[tooltip-bottom]:hover::before {
  transform: translate(-50%, 0);
}

/* 오른쪽 툴팁 */
[tooltip-right] {
  position: relative;
  cursor: pointer;
}

[tooltip-right]::after {
  content: attr(tooltip-title);

  opacity: 0;

  background: #222;
  border-radius: 4px;
  color: #fff;
  margin-right: 5px;
  padding: 2px 5px;
  white-space: nowrap;
  z-index: 10;

  position: absolute;
  left: 100%;

  transition: all 0.2s ease-out 0.2s;
  transform: translate(0, -2px);
  transform-origin: top;
}
[tooltip-right]::before {
  content: "";
  opacity: 0;

  width: 0px;
  height: 0px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #222;
  border-left: 5px solid none;
  white-space: nowrap;
  z-index: 10;

  position: absolute;
  left: 100%;
  transition: all 0.2s ease-out 0.2s;
  transform: translate(0, 50%);
  transform-origin: top;
}

[tooltip-right]:hover::after,
[tooltip-right]:hover::before {
  opacity: 1;
}

[tooltip-right]:hover::after {
  transform: translate(10px, -2px);
}
[tooltip-right]:hover::before {
  transform: translate(5px, 50%);
}

/* 왼쪽 툴팁 */
[tooltip-left] {
  position: relative;
  cursor: pointer;
}

[tooltip-left]::after {
  content: attr(tooltip-title);

  opacity: 0;

  background: #222;
  border-radius: 4px;
  color: #fff;
  margin-bottom: 12px;
  padding: 2px 5px;
  white-space: nowrap;
  z-index: 10;

  position: absolute;
  right: 100%;

  transition: all 0.2s ease-out 0.2s;
  transform: translate(0, -2px);
  transform-origin: top;
}
[tooltip-left]::before {
  content: "";
  opacity: 0;

  width: 0px;
  height: 0px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid none;
  border-left: 5px solid #222;
  white-space: nowrap;
  z-index: 10;

  position: absolute;
  right: 100%;
  transition: all 0.2s ease-out 0.2s;
  transform: translate(0, 50%);
  transform-origin: top;
}

[tooltip-left]:hover::after,
[tooltip-left]:hover::before {
  opacity: 1;
}

[tooltip-left]:hover::after {
  transform: translate(-10px, -2px);
}
[tooltip-left]:hover::before {
  transform: translate(-5px, 50%);
}