ФОРУМ PS-Studio.Info

  • Страница 1 из 1
  • 1
Форум » Общий форум: Веб-дизайн » Готовые решения » Тултипы и модальные окна » Простые всплывающие подсказки на CSS (Как сделать всплывающие подсказки с помощью стилей CSS)
Простые всплывающие подсказки на CSS
Дата: Ср, 09.05.2018, 16:51 Сообщение # 1
ps-studio
Администраторы
В данном случае рассматриваем вариант, когда у нас будет какой-то блок div с присвоенным ему классом, а текст всплывающей подсказки будет внутри этого блока и плюс дополнительно в тегах span.

HTML-код нашей подсказки будет такой:

Код

<div class="tooltip">Наведи на меня курсор мыши!
<span class="tooltiptext">Здесь текст всплывающей подсказки</span>
</div>




А теперь стили, с помощью которых оформляется и выводится наша подсказка:

Код

/* Контейнер подсказки */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* Если вы хотите выделить сам текст подчёркиванием */
}

/* Текст подсказки */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Позиционирование текста подсказки */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Затухание для подсказки */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Уголок подсказки */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Показываем текст подсказки при наведении мыши на её контейнер */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


Стили для оформления всплывающей подсказки под элементом:

Код

/* Tooltip container */
.tooltip {
    color:#98a6ad;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #98a6ad; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #8bc34a;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #8bc34a transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


HTML-конструкция подсказки остаётся такой же, как и в предыдущем примере.

профиль www Вверх
Дата: Ср, 09.05.2018, 19:30 Сообщение # 2
ps-studio
Администраторы
Иногда нужно вывести всплывающую подсказку не сверху элемента, а например сбоку, слева или справа.

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

HTML-код нашей подсказки оставим прежним:

Код

<div class="tooltip">Наведи на меня курсор мыши!
<span class="tooltiptext">Это подсказка</span>
</div>


А вот стили для неё будут немного другими:

Код

/* Tooltip container */
.tooltip {
    color:#98a6ad;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #98a6ad; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width:150px;
    background-color: #8bc34a;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
    

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #8bc34a transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}




Минус этого решения в том, что если текст всплывающей подсказки будет чуть подлиннее, то её позиционирование смещается, получается что подсказка по вертикали выводится не по центру элемента, для которого она выводится.
Чтобы понять, о чём идёт речь, посмотрите следующее демо по ссылке внизу.

профиль www Вверх
Дата: Ср, 09.05.2018, 19:47 Сообщение # 3
ps-studio
Администраторы
Вывод всплывающей подсказки слева от элемента

HTML-код подсказки

Код

<div class="tooltip">Наведи на меня курсор мыши!
<span class="tooltiptext">Это подсказка</span>
</div>


Стили оформления:

Код

/* Tooltip container */
.tooltip {
    color:#98a6ad;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #98a6ad; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width:150px;
    background-color: #8bc34a;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 105%;
    

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #8bc34a;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


профиль www Вверх
Форум » Общий форум: Веб-дизайн » Готовые решения » Тултипы и модальные окна » Простые всплывающие подсказки на CSS (Как сделать всплывающие подсказки с помощью стилей CSS)
  • Страница 1 из 1
  • 1
Поиск: