/* TOOLTIP */

[class*=tooltip] {position: relative;} /* kvůli absolute pozicování .title */

[class*=tooltip] > .title { /* bublina */
  white-space: nowrap;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  background-color: #FBFBFB;
  color: #777;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

/* bez OVERFLOW animaci spouští skrytý přetečený text */
.tooltipcontainer {overflow: hidden;} /* vytvářený v script_tooltip.js */

[class*=tooltip] .title::before { /* zobáček */
  position: absolute;
  z-index: 1;
  content: "";
  height: 8px;
  width: 8px;
  background-color: #FBFBFB;
  transform: translate(-50%) rotate(45deg);
}

.tooltipTop > .title, .tooltipBottom > .title {left: 50%; transform: translateX(-50%);} /* vycentrování bubliny na oX */
.tooltipRight > .title, .tooltipLeft > .title {top: 50%; transform: translateY(-50%);} /* vycentrování bubliny na oY */
.tooltipTop .title::before, .tooltipBottom .title::before {left: 50%;} /* vycentrování zobáčku na oX */
.tooltipRight .title::before, .tooltipLeft .title::before {bottom: calc(50% - (8px / 2));} /* vycentrování zobáčku na oY */

[class*=tooltip]:hover > .title {visibility: visible;}


/* napravo */
    .tooltipRight > .title { /* animace ZPĚT */
      transition: left 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.1s ease-in 0.1s; /* transition: vlastnost doba způsob zpoždění */
      left: 50%;
      opacity: 0;
    }
    .tooltipRight:hover > .title { /* animace TAM */
      left: calc(100% + 8px + 2px);
      opacity: 1;
    }
    .tooltipRight .title::before {right: calc(100% - 8px);} /* umístění zobáčku */
    #menu .tooltipRight .title {margin-top: calc((-1) * (20px / 2));} /* margin u #menu img rozhazuje oY centrování */


/* nalevo */
    .tooltipLeft > .title { /* animace ZPĚT */
      transition: right 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.1s ease-in 0.1s; /* transition: vlastnost doba způsob zpoždění */
      right: calc(50% + 8px);
      opacity: 0;
    }
    .tooltipLeft:hover > .title { /* animace TAM */
      right: calc(100% + 8px + 2px);
      opacity: 1;
    }
    .tooltipLeft .title::before {right: -8px;} /* umístění zobáčku */


/* nahoře */
    .tooltipTop > .title { /* animace ZPĚT */
      transition: top 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.1s ease-in 0.1s; /* transition: vlastnost doba způsob zpoždění */
      top: 0%;
      opacity: 0;
    }
    .tooltipTop:hover > .title { /* animace TAM */
      top: calc(-50% - 8px - 2px);
      opacity: 1;
    }
    .tooltipTop .title::before {bottom: -3px;}


/* dole */
    .tooltipBottom > .title { /* animace ZPĚT */
      transition: top 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.1s ease-in 0.1s; /* transition: vlastnost doba způsob zpoždění */
      top: 50%;
      opacity: 0;
    }
    .tooltipBottom:hover > .title { /* animace TAM */
      top: calc(100% + 8px + 2px);
      opacity: 1;
    }
    .tooltipBottom .title::before {box-shadow: -2px -2px 5px 1px rgba(0, 0, 0, 0.2); top: -3px;}