Всплывающие подсказки CSS

Перед началом создания всплывающей подсказки на CSS давайте уточним, что это такое и как она выглядит без оформления.

Всплывающая подсказка – это текст, который появляется при наведении курсора мышки на ссылку или на картинку.  Подсказка будет появляться в том случае, если в атрибуте title содержится описание:

<a href="https://bloggood.ru/raznye-temy/" title="Разные темы">Разные темы</a>

Результат неоформленной всплывающей подсказки (пример на ссылке):

<img src="images/jyl-vern-1.jpg" width="220" height="291" title="ЖюльВерн">

Результат неоформленной всплывающей подсказки (пример на картинке):

К сожаленью, не всегда и не везде можно оформить стиль всплывающей подсказки к тегу title. Но выход существует и следующие примеры тому доказательство.

⇒ Оформление всплывающей подсказки для ссылок

Всплывающая подсказка будет выводиться сверху.  Пример:

Итак, в HTML файле пропишите вот такой код:

<br><br><br>
<a href="https://bloggood.ru/" title="Текст подсказки." class="bloggood-ru-podskazka">Ссылка</a>

а в CSS вот такой:

.bloggood-ru-podskazka{
    display: inline;
    position: relative;
}
.bloggood-ru-podskazka:hover:after{
    background: #000;
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title); /* Выводим текст всплывающей подсказки*/
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: auto;
}
.bloggood-ru-podskazka:hover:before{
    border: solid;
    border-color: #000 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

Вы заметили, что вместе с оформленной всплывающей подсказкой вылезает и неоформленная. Чтобы убрать неоформленную подсказку, замените «title» на другое название, например «bloggood-ru».

В HTML

<br><br><br>
<a href="https://bloggood.ru/" bloggood-ru="Текст подсказки." class="bloggood-ru-podskazka">Ссылка</a>

В CSS заменить строку 10 на вот эту:

content: attr(bloggood-ru); /* Выводим текст всплывающей подсказки*/

Вот так это будет выглядеть в CSS:

.bloggood-ru-podskazka{
    display: inline;
    position: relative;
}
.bloggood-ru-podskazka:hover:after{
    background: #000;
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(bloggood-ru); /* Выводим текст всплывающей подсказки*/
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: auto;
}
.bloggood-ru-podskazka:hover:before{
    border: solid;
    border-color: #000 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

Результат:

⇒ Всплывающая подсказка для текста, которая будет выводиться снизу.
Пример:

в HTML файле пропишите вот такой код:

<br><br><br>
<span class="bloggood-ru-podskazka">Текст<span class="classic">Текст подсказки</span></span>

в CSS вот такой:

.bloggood-ru-podskazka {
  position: relative;
  cursor: help;
}
.bloggood-ru-podskazka span {
  position: absolute;
  margin-left: -30000px;
  background-color: #000;
  color: #fafafa;
  padding:10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
.bloggood-ru-podskazka:hover span {
  margin-left: 0;
  width: 250px;
  z-index: 1000;
  top:30px;
  left:20px;
}
.bloggood-ru-podskazka span:after{
  content: '';
  width:0;
  height:0;
  border-bottom: 10px solid #000;
  border-right: 10px solid transparent;
  position: absolute;
  top:-10px;
  left:10px;
}

⇒ Всплывающая подсказка для картинки, которая будет выводиться снизу.
Пример:

В HTML

<div class="image" title="Текст подсказки."><img src="pirelli-zasvet-02.JPG"></div>

в CSS:

.image {
    display: inline-block;
    position: relative;
   }
   .image:hover::after {
    content: attr(title); /* Выводим текст всплывающей подсказки*/
    position: absolute;
    left: 0; right: 0; bottom: 0px;
    z-index: 1;
    background: rgba(0,255,102,0.6);
    color: #fff;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 14px; /* Размер текста подсказки */
    padding: 5px 10px;
    border: 1px solid #333;
   }

Вы заметили, что вместе с оформленной всплывающей подсказкой вылезает и неоформленная. Это не красиво.
По этой причине предлагаю убрать, а точнее заменить, «title» на другое название, например, «bloggood-ru».

В HTML

<div class="image" bloggood-ru="Текст подсказки."><img src="kartinka.JPG"></div>

В CSS заменить строку 6 на вот эту

content: attr(bloggood-ru); /* Выводим текст всплывающей подсказки*/

Вот так это будет выглядеть в CSS:

.image {
    display: inline-block;
    position: relative;
   }
   .image:hover::after {
    content: attr(bloggood-ru); /* Выводим текст всплывающей подсказки*/
    position: absolute;
    left: 0; right: 0; bottom: 0px;
    z-index: 1;
    background: rgba(0,255,102,0.6);
    color: #fff;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 14px; /* Размер текста подсказки */
    padding: 5px 10px;
    border: 1px solid #333;
   }

Результат:

Внимание, результаты как это работает можете посмотреть здесь
[посмотреть все примеры]

Удачи вам!!! 

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css