Подсказки на CSS

Подсказки для ссылок и других элементов исключительно средствами CSS

by Andrey Dobrovoi

HTML

<div class="demo-wrapper">
  <h1>Подсказки на CSS</h1>
  <p>
    <a href="#blank" class="tooltip tooltip--topright">
      <span aria-describedby="tooltip-1">Наведи на меня</span>
      <span id="tooltip-1" class="tooltip-text" role="tooltip" aria-hidden="true">Я верхняя подсказка</span>
    </a> или
    <a href="#blank" class="tooltip tooltip--topright is-active">
      <span aria-describedby="tooltip-2">Ссылка с видимой посказкой</span>
      <span id="tooltip-2" class="tooltip-text" role="tooltip" aria-hidden="true">Я верхняя подсказка</span>
    </a>
  </p>
  <p>
    + парочка вариантов появления подсказок:
  </p>
  <p>
    <a href="#blank" class="u-ir demo-icon tooltip tooltip--topleft">
      <span class="tooltip-text">Я верхняя подсказка слева.</span>
    </a>
    <a href="#blank" class="u-ir demo-icon tooltip tooltip--topright">
      <span class="tooltip-text">Я верхняя подсказка справа.Я верхняя подсказка справа.Я верхняя подсказка справа.</span>
    </a>
  </p>
</div>

CSS

/* =====================================
Demo
===================================== */

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  color: #222;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  min-height: 100vh;
  background: -webkit-linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* Chrome 10+, Saf5.1+ */
  background: -moz-linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* FF3.6+ */
  background: -ms-linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* IE10 */
  background: -o-linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* Opera 11.10+ */
  background: linear-gradient(90deg, #abbaab 10%, #ffffff 90%);
  /* W3C */
}

.demo-wrapper h1 {
  font-weight: normal;
}

.u-ir {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.demo-wrapper {
  text-align: center;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2em;
  padding-bottom: 2em;
}

.demo-wrapper h1,
.demo-wrapper p {
  margin-bottom: 2.5em;
}

.demo-icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #00897b;
  border: 1px solid #00675c;
  border-radius: 50%;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}


/* =====================================
Подсказки
===================================== */

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

.tooltip.u-ir {
  margin: 0;
}

.tooltip.u-ir:hover,
.tooltip.u-ir:focus,
.tooltip.u-ir:active,
.tooltip.u-ir.is-active {
  clip: none;
  overflow: visible;
}

.tooltip-text {
  color: #ffffff;
  font-size: 12px;
  line-height: 1em;
  text-decoration: none;
  white-space: nowrap;
  position: absolute;
  z-index: 9999;
  padding: 0.417em 0.833em;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  visibility: hidden;
 ...

JavaScript

/* ========================================================================= */
/*	shurawi --- dbmast.ru ---
/* ========================================================================= */