Столк­нул­ся с зада­чей — сде­лать на сай­те неболь­шое всплы­ва­ю­щее окно с инфор­ма­ци­ей с воз­мож­но­стью закры­тия окна кре­сти­ком. Ниже при­во­жу рабо­чий код, кото­рый это реа­ли­зо­вы­ва­ет. Всё рабо­та­ет на CSS и HTML

Всплы­ва­ю­щая под­сказ­ка
для закры­тия нуж­но клик­нуть на кре­стик или на иконку.
X

Всплы­ва­ю­щая под­сказ­ка
для закры­тия нуж­но клик­нуть на кре­стик или иконку.
X

Всплы­ва­ю­щая под­сказ­ка
для закры­тия нуж­но клик­нуть на кре­стик или иконку.
X

Всплы­ва­ю­щая под­сказ­ка
для закры­тия нуж­но клик­нуть на кре­стик или иконку.
X

<style>
.support {
 display: inline-block;
 position: relative;
 text-decoration: none;
 cursor: pointer;
}
.support em {
 background: #fc9862;
 background: -moz-linear-gradient(top,  #fc9862 0%, #e84d00 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fc9862), color-stop(100%,#e84d00));
 background: -webkit-linear-gradient(top,  #fc9862 0%,#e84d00 100%);
 background: -o-linear-gradient(top,  #fc9862 0%,#e84d00 100%);
 background: -ms-linear-gradient(top,  #fc9862 0%,#e84d00 100%);
 background: linear-gradient(to bottom,  #fc9862 0%,#e84d00 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc9862', endColorstr='#e84d00',GradientType=0 );
 border-radius: 20px;
 border: 1px solid #999;
 text-align: center;
 color: #FFF;
 font: normal bold 16px Arial;
 padding: 0 4px;
}

.tip,
.tip-three,
span.support::before,
span.support-hover::before {
   display: none;
   position: absolute;
   z-index: 9998;
   top: 0;
   left: 100%;
   background: #EDEDED;
   border-radius: 3px;
   border: 1px solid #ccc;
   box-shadow: 5px 5px 0.5em -0.1em rgba(0,0,6,0.5);
   text-align: left;
   color: #000;
   font: normal 500 14px Arial, sans-serif;
   opacity: .9;
   cursor: default;
   padding: 5px;
   margin: -15px 0 0 10px; /* Выравнивание подсказки */
   width: 200px;
   min-height: 50px;
  height: auto;
}



.tip-block {
  display: inline-block;
  position: relative;
  background: transparent;
  margin: 0;
  padding: 0;
  border: 0;
  height: 0;
  width: 1px;
}

.tip-checkbox {
   display: none;
}

#tip-checkbox:checked ~ * .tip-three {
     display: block;
}

.tip-close {
  display: inline-block;
   position: absolute;
  background: #333;
  border-radius: 20px;
  border: 2px solid #FFF;
  top: -8px;
  right: -8px;
  font: normal bold 14px Comic Sans MS;
  text-align: center;
  color: #fff;
  cursor: pointer;
  padding: 0 4px;
}
</style>

Наш HTML файл будет выгля­деть сле­ду­ю­щим образом

<input type="checkbox" id="tip-checkbox" class="tip-checkbox">
<label for="tip-checkbox" class="support"><em>?</em></label>
<span class='tip-block'>
 <span class="tip-three">Подсказка созданная с помощью тега 'INPUT'.<br>
  При клике по значку появляется блок с подсказкой расположенный внутри.
  <label for="tip-checkbox" class="tip-close">X</label>
 </span>
</span>