• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Появление подсказок CSS по всем сторонам (Красивые всплывающая подсказка при наведении по сторонам)
Появление подсказок CSS по всем сторонам
Kosten
Дата: Суббота, 2021-10-30, 04:33 | Сообщение 1
Оффлайн
Администраторы
Сообщений:38989
Награды: 65
Рассмотрим код со стилистикой, где идут четыре подсказки, что есть возможность выбрать именно ту сторону, где хотите, чтоб при наведение клика она появилась. Сама подсказка имеет обычный стиль дизайна, где с появлением выезжаем форма, а внутри ее уже будет написано, то что изначально вы закладывали при установки.

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



HTML

Код
<div class="asum">ПО ЛЕВУЮ<i>Всплывающая подсказка на CSS по левую сторону
CSS3!</i></div>
<div class="kids">ПО ВВЕРХ<i>Всплывающая подсказка на CSS поверх обзора
CSS3!</i></div>
<div class="edsa">ПО НИЗУ<i>Всплывающая подсказка на CSS по низ обзора.
CSS3!</i></div>
<div class="pode">ПО ПРАВУЮP<i>Всплывающая подсказка на CSS по правую сторону
CSS3!</i></div>

CSS

Код
/* -------------- asum start --------------- */
.asum > i {
  font: italic 90% Georgia;
    cursor:text;
    background: floralwhite;
    background-clip: padding-box;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
    border: 4px solid darkcyan;
    border-radius: 6px;
    position: absolute;
    width: 200px;
    height: 40px;
    padding: 10px;   
    margin-right: 15px;
    right: 100%;
    top: -20px;
    margin-top:-8%;
    left: auto;
    visibility:hidden;
    opacity:0;
    -webkit-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}
.asum > i:before, .asum > i:after{content: "";position:absolute;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:10px solid transparent;bottom: 20px;
right: -19px;left:auto}
.asum > i:before{border-left: 10px solid darkcyan;margin-right: -5px}
.asum > i:after{border-left: 10px solid floralwhite;z-index: 1}
.asum:hover > i{visibility: visible;opacity:1}
/* -------------- asum end --------------- */

/* -------------- tt start ------------- */
.kids > i {
    cursor:text;
    font: italic 90% Georgia;
    background: floralwhite;
    background-clip: padding-box;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
    border: 4px solid darkcyan;
    border-radius: 6px;
    position: absolute;
    width: 200px;
    margin-left: -100px;
    left: 49.6%;
    padding: 10px 0;
    bottom: 100%;
    margin-bottom: 15px;
    visibility:hidden;
    opacity:0;
    -webkit-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}
.kids > i:before, .kids > i:after{content: "";position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;top:100%;left:50%;margin-left:-10px;padding-bottom: 5px}
.kids > i:before{border-top: 10px solid darkcyan;margin-top: 4px;}
.kids > i:after{border-top: 10px solid floralwhite;margin-top: -2px;z-index: 1}
.kids:hover > i{visibility: visible;opacity:1}
/* -------------- kids end --------------- */

/* -------------- tb start ------------- */

.edsa > i {
    cursor:text;    
    font: italic 90% Georgia;
    background: floralwhite;
    background-clip: padding-box;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
    border: 4px solid darkcyan;
    border-radius: 6px;
    position: absolute;
    width: 200px;
    margin-left: -100px;
    left: 49.9%;
    padding: 10px 0;
    top: 100%;
    margin-top: 15px;
    visibility:hidden;
    opacity:0;
    -webkit-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}
.edsa > i:before, .edsa > i:after{content: "";position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;bottom:100%;left:50%;margin-left:-10px}
.edsa > i:before{border-bottom: 10px solid darkcyan;margin-bottom: 4px;padding-top: 5px}
.edsa > i:after{border-bottom: 10px solid floralwhite;margin-bottom: -2px;z-index: 1}
.edsa:hover > i{visibility: visible;opacity:1}
/* -------------- edsa end --------------- */

/* -------------- pode start ------------- */
.pode > i {
    cursor:text;
    font: italic 90% Georgia;
    background: floralwhite;
    background-clip: padding-box;
    box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
    border: 4px solid darkcyan;
    border-radius: 6px;
    position: absolute;
    width: 200px;
    height: 40px;
    padding: 10px;
    margin-left: 15px;
    left: auto;
    top: -20px;
    margin-top:-8%;
    right: auto;
    visibility:hidden;
    opacity:0;
    -webkit-transition: opacity 0.5s linear;
    -ms-transition: opacity 0.5s linear;
    -o-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
}
.pode > i:before, .pode > i:after{content: "";position:absolute;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid transparent;bottom: 20px;
left: -19px;right:auto}
.pode > i:before{border-right:10px solid darkcyan;margin-left: -5px}
.pode > i:after{border-right:10px solid floralwhite;z-index: 1}
.pode:hover > i{visibility: visible;opacity:1}
/* -------------- pode end --------------- */

Каждая подсказка в плане стилистике под своим классом установлена и разделено от других. Сделано для того, чтоб при выборе вы не путали и лишнего не скопировали.

Демонстрация
Прикрепления: 5708771.png(9.9 Kb) · tooltip-css.zip(4.1 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Появление подсказок CSS по всем сторонам (Красивые всплывающая подсказка при наведении по сторонам)
  • Страница 1 из 1
  • 1
Поиск: