Proyectos de Subversion Moodle

.h5p-tooltip {
  --translateX: -50%;
  --translateY: 0;

  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(var(--translateX)) translateY(var(--translateY));

  z-index: 4;

  font-size: 0.9rem;
  line-height: 1.5rem;

  padding: 0 0.5rem;
  white-space: nowrap;

  background: #000;
  color: #FFF;

  cursor: default;

  /* To hide the position adjustments and to get a bit more 
     pleasent popup effect */
  -webkit-animation: 800ms ease 0s normal forwards 1 fadein;
  animation: 800ms ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
  0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadein{
  0% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 1; }
}

.h5p-tooltip-bottom {
  top: 100%;
  bottom: auto;
}

.h5p-tooltip-left {
  --translateY: -50%;
  --translateX: 0;
  top: 50%;
  bottom: auto;
  left: auto;
  right: 100%;
}

.h5p-tooltip-right {
  --translateY: -50%;
  --translateX: 0;
  top: 50%;
  bottom: auto;
  left: 100%;
  right: auto;
}

.h5p-tooltip-visible {
  display: block;
}