[tooltip] {
    position: relative;
  }



  .noTouch [tooltip]::after {
    content: attr(tooltip);   /* liest das [tooltip] Attribut aus */
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 0.5em;
    -webkit-box-shadow: 0.1em 0.1em 0.2em rgba(var(--boxShadow));
    -moz-box-shadow: 0.1em 0.1em 0.2em rgba(var(--boxShadow));
    box-shadow: 0.1em 0.1em 0.2em rgba(var(--boxShadow));
    background: rgb(var(--colUIBack04));
    border-radius: 0.5em;
    border: solid transparent;
    border-color: rgb(var(--colUIText04));
    border-width: 1px 0 0 1px;
    color: rgb(var(--colUIText03));
    z-index: 1000;
    font-size: 0.8em;
    line-height: 1;
    letter-spacing: 0.1em;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
  }

  /* Make the tooltips respond to hover */
  .noTouch [tooltip]:hover::after {
    display: block;
  }

  /* don't show empty tooltips */
  [tooltip='']::after {
    display: none !important;
  }

  /* FLOW: To Top OR none at all */

  [tooltip]:not([flow])::after,
  [tooltip][flow^="top"]::after {
    bottom: 110%;
    left: 50%;
    transform: translate(-50%, -.5em);
  }

  /* FLOW: To Bottom */

  [tooltip][flow^="bottom"]::after {
    top: 110%;
    left: 50%;
    transform: translate(-50%, .5em);
  }

  /* FLOW: To Left */
  [tooltip][flow^="left"]::after {
    top: 50%;
    right: 110%;
    transform: translate(-.5em, -50%);
  }

  /* FLOW: To right */
  [tooltip][flow^="right"]::after {
    top: 50%;
    left: 110%;
    transform: translate(.5em, -50%);
  }

  /* KEYFRAMES */
  @keyframes tooltips-vert {
    to {
      opacity: .9;
      transform: translate(-50%, 0);
    }
  }

  @keyframes tooltips-horz {
    to {
      opacity: .9;
      transform: translate(0, -50%);
    }
  }

  /* FX All The Things */
  [tooltip]:not([flow]):hover::after,
  [tooltip][flow^="top"]:hover::after,
  [tooltip][flow^="bottom"]:hover::after {
    animation: tooltips-vert 200ms ease-out forwards;
  }

  [tooltip][flow^="left"]:hover::after,
  [tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 200ms ease-out forwards;
  }

@media (orientation: portrait){

    [tooltip][flow^="right"].button__sideBar::after,
    [tooltip][flow^="right"].button__mainMenu::after {
        top: 110%;
        left: 110%;
        right: unset;
        bottom: unset;
        transform: translate(-50%, 0.5em);
      }

    [tooltip][flow^="left"].button__sideBar::after,
    [tooltip][flow^="left"].button__mainMenu::after {
        top: unset;
        left: 50%;
        right: unset;
        bottom: 110%;
        transform: translate(-50%, -0.5em);
      }

        [tooltip][flow^="right"]:hover::after,
        [tooltip][flow^="left"]:hover::after {
            animation: tooltips-vert 200ms ease-out forwards;
        }

        [tooltip][flow^="bottom"]:hover::after,
        [tooltip][flow^="top"]:hover::after {
            animation: tooltips-horz 200ms ease-out forwards;
        }
}

/* ----------------------- data-tooltip for automaticly generated tooltips (Multiply Elements) */

[data-tooltip] {
  position: relative;
}



.noTouch [data-tooltip]::after {
  content: attr(data-tooltip);   /* liest das [data-tooltip] Attribut aus */
  min-width: 3em;
  max-width: 21em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0.5em;
  -webkit-box-shadow: 0.1em 0.1em 0.2em rgba(var(--boxShadow));
  -moz-box-shadow: 0.1em 0.1em 0.2em rgba(var(--boxShadow));
  box-shadow: 0.1em 0.1em 0.2em rgba(var(--boxShadow));
  background: rgb(var(--colUIBack04));
  border-radius: 0.5em;
  border: solid transparent;
  border-color: rgb(var(--colUIText04));
  border-width: 1px 0 0 1px;
  color: rgb(var(--colUIText03));
  z-index: 1000;
  font-size: 0.8em;
  line-height: 1;
  letter-spacing: 0.1em;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}

/* Make the data-tooltips respond to hover */
.noTouch [data-tooltip]:hover::after {
  display: block;
}

/* don't show empty data-tooltips */
[data-tooltip='']::after {
  display: none !important;
}

/* FLOW: To Top OR none at all */

[data-tooltip]:not([flow])::after,
[data-tooltip][flow^="top"]::after {
  bottom: 110%;
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: To Bottom */

[data-tooltip][flow^="bottom"]::after {
  top: 110%;
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: To Left */
[data-tooltip][flow^="left"]::after {
  top: 50%;
  right: 110%;
  transform: translate(-.5em, -50%);
}

/* FLOW: To right */
[data-tooltip][flow^="right"]::after {
  top: 50%;
  left: 110%;
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes data-tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes data-tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */
[data-tooltip]:not([flow]):hover::after,
[data-tooltip][flow^="top"]:hover::after,
[data-tooltip][flow^="bottom"]:hover::after {
  animation: data-tooltips-vert 200ms ease-out forwards;
}

[data-tooltip][flow^="left"]:hover::after,
[data-tooltip][flow^="right"]:hover::after {
  animation: data-tooltips-horz 200ms ease-out forwards;
}

@media (orientation: portrait){

  [data-tooltip][flow^="right"].button__sideBar::after,
  [data-tooltip][flow^="right"].button__mainMenu::after {
      top: 110%;
      left: 110%;
      right: unset;
      bottom: unset;
      transform: translate(-50%, 0.5em);
    }

  [data-tooltip][flow^="left"].button__sideBar::after,
  [data-tooltip][flow^="left"].button__mainMenu::after {
      top: unset;
      left: 50%;
      right: unset;
      bottom: 110%;
      transform: translate(-50%, -0.5em);
    }

      [data-tooltip][flow^="right"]:hover::after,
      [data-tooltip][flow^="left"]:hover::after {
          animation: data-tooltips-vert 200ms ease-out forwards;
      }

      [data-tooltip][flow^="bottom"]:hover::after,
      [data-tooltip][flow^="top"]:hover::after {
          animation: data-tooltips-horz 200ms ease-out forwards;
      }
}