/*
Example tag set: <span data-balloon="tool tip text" data-balloon-pos="up|down|left|right" data-balloon-length="small|medium|large|fit"> ... </span>
*/

[data-balloon] {
  position: relative;
}
[data-balloon]::before {
  opacity: 0;
  pointer-events: none;
  transition: all 0.18s ease-out;
  z-index: 10;
  white-space: nowrap;
  font-size: 14px;
  content: attr(data-balloon);
  position: absolute;
  color: #fff;
  background: rgba(17, 17, 17, 0.9);
  padding: .5em 1em;
  border-radius: 4px;
}
[data-balloon]::after {
  background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(0)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
  background-size: 100% auto;
  width: 18px;
  height: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.18s ease-out;
  z-index: 10;
  content: '';
  position: absolute;
}
[data-balloon]:hover::before, [data-balloon]:hover::after {
  opacity: 1;
  pointer-events: auto;
}
[data-balloon][data-balloon-pos="up"]::before {
  bottom: 100%;
  left: 50%;
  margin-bottom: 11px;
  transform: translate3d(-50%, 10px, 0);
  transform-origin: top;
}
[data-balloon][data-balloon-pos="up"]::after {
  bottom: 100%;
  left: 50%;
  margin-bottom: 5px;
  transform: translate3d(-50%, 10px, 0);
  transform-origin: top;
}
[data-balloon][data-balloon-pos="up"]:hover::before {
  transform: translate3d(-50%, 0, 0);
}
[data-balloon][data-balloon-pos="up"]:hover::after {
  transform: translate3d(-50%, 0, 0);
}
[data-balloon][data-balloon-pos="down"]::before {
  top: 100%;
  left: 50%;
  margin-top: 11px;
  transform: translate3d(-50%, -10px, 0);
}
[data-balloon][data-balloon-pos="down"]::after {
  background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36px" height="12px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(180 18 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
  background-size: 100% auto;
  width: 18px;
  height: 6px;
  top: 100%;
  left: 50%;
  margin-top: 5px;
  transform: translate3d(-50%, -10px, 0);
}
[data-balloon][data-balloon-pos="down"]:hover::before {
  transform: translate3d(-50%, 0, 0);
}
[data-balloon][data-balloon-pos="down"]:hover::after {
  transform: translate3d(-50%, 0, 0);
}
[data-balloon][data-balloon-pos="left"]::before {
  top: 50%;
  right: 100%;
  margin-right: 11px;
  transform: translate3d(10px, -50%, 0);
}
[data-balloon][data-balloon-pos="left"]::after {
  background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(-90 18 18)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
  background-size: 100% auto;
  width: 6px;
  height: 18px;
  top: 50%;
  right: 100%;
  margin-right: 5px;
  transform: translate3d(10px, -50%, 0);
}
[data-balloon][data-balloon-pos="left"]:hover::before {
  transform: translate3d(0, -50%, 0);
}
[data-balloon][data-balloon-pos="left"]:hover::after {
  transform: translate3d(0, -50%, 0);
}
[data-balloon][data-balloon-pos="right"]::before {
  top: 50%;
  left: 100%;
  margin-left: 11px;
  transform: translate3d(-10px, -50%, 0);
}
[data-balloon][data-balloon-pos="right"]::after {
  background: no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12px" height="36px"><path fill="rgba(17, 17, 17, 0.9)" transform="rotate(90 6 6)" d="M2.658,0.000 C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>');
  background-size: 100% auto;
  width: 6px;
  height: 18px;
  top: 50%;
  left: 100%;
  margin-left: 5px;
  transform: translate3d(-10px, -50%, 0);
}
[data-balloon][data-balloon-pos="right"]:hover::before {
  transform: translate3d(0, -50%, 0);
}
[data-balloon][data-balloon-pos="right"]:hover::after {
  transform: translate3d(0, -50%, 0);
}
[data-balloon][data-balloon-length="small"]::before {
  width: 80px;
  white-space: normal;
}
[data-balloon][data-balloon-length="medium"]::before {
  width: 150px;
  white-space: normal;
}
[data-balloon][data-balloon-length="large"]::before {
  width: 260px;
  white-space: normal;
}
[data-balloon][data-balloon-length="xlarge"]::before {
  width: 380px;
  white-space: normal;
}
[data-balloon][data-balloon-length="fit"]::before {
  width: 100%;
  white-space: normal;
}

@media screen and (max-width: 768px) {
  [data-balloon][data-balloon-length="xlarge"]::before {
    width: 90vw;
    white-space: normal;
  }
}