Шаблон:96flo/tooltip.css: различия между версиями

Материал из МК14 | Space Station 14 Wiki
(Новая страница: «.tooltip { position: relative; display: inline; } .tooltiptext { position: absolute; min-width: 240px; max-width: 100%; left: -240px; right: -240px; top: 125%; margin-left: auto; margin-right: auto; z-index: 99; padding: 22px; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; border: 1px solid #402e75; border-radius: 1.4rem;...»)
 
Нет описания правки
Строка 1: Строка 1:
.tooltip-container {
  position: relative;
  display: inline-block;
}
.tooltip {
.tooltip {
    position: relative;
  position: relative;
    display: inline;
  cursor: pointer;
}
}


.tooltiptext {
.tooltiptext {
    position: absolute;
  visibility: hidden;
    min-width: 240px;
  width: 120px;
    max-width: 100%;
  background-color: black;
    left: -240px;
  color: white;
    right: -240px;
  text-align: center;
    top: 125%;
  border-radius: 6px;
    margin-left: auto;
  padding: 5px;
    margin-right: auto;
  position: absolute;
    z-index: 99;
  z-index: 1;
    padding: 22px;
  bottom: 125%;
    visibility: hidden;
  left: 50%;
    opacity: 0;
  margin-left: -60px;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    border: 1px solid #402e75;
    border-radius: 1.4rem;
    background: rgba(20, 24, 31, 0.5);
}
 
.tooltip:hover > .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
 
@media screen and (min-width: 851px) {
    .mobile {
        display: none;
    }
 
    .headder {
        width: 25%;
        float: right;
        margin-left: 1em;
    }
 
    .stiky {
        position: sticky;
        top: 0.1em;
    }
}
}


@media screen and (max-width: 850px) {
.tooltip:hover .tooltiptext {
    .nomobile {
  visibility: visible;
        display: none !important;
    }
 
    .headder {
        width: 100%;
        margin-left: 0;
    }
 
    .tooltip {
        position: static;
    }
 
    .tooltiptext {
        position: fixed !important;
        width: 80vw !important;
        top: 40vh !important;
        left: 0 !important;
        margin: 0 auto !important;
        right: 0 !important;
    }
 
    .mobile-image img {
        width: 32px;
        height: 32px;
    }
}
}

Версия от 13:37, 31 мая 2025

.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}