Здравствуйте! Сегодня у меня для вас простой материал который даже я бы не стал публиковать но так как люди просят помочь написать такие вещи то я решил что другим тоже может пригодиться и вот предлагаю вашему вниманию блоки тайтл для кнопок ссылок текста и тд.
О материале
В данном примере я сделал четыре варианта блоков которые будут появляться при наведении на ссылку или текст с право с лево а так же с верху или с низу смотря какой вы выберите. цветовую гамму для блоков я выбрал белый текст на голубом фоне а так же добавил округление углов, смотрим скриншоты
Скриншоты блоков
Не буду отписывать каждый скриншот с видом блока по отдельности а просто добавлю все сразу я думаю какой куда и так понятно по направлению уголка
Ну а теперь приступим к установки кода
Установка кода
Давайте начнём с того что установим стили всех блоков к себе в таблицу что бы иметь возможность использовать все варианты блоков. Переходим в админ панель - управление дизайном - таблица стиле css и в самый её конец добавляем код что находится ниже
Код
.iblockcloud {
position: absolute;
padding: 12px 16px;
width: 224px;
background: #2a94ff;
border-color: #2a94ff;
box-sizing: border-box;
border-radius: 8px;
color: #fff;
text-align: center;
font-size: 13px;
line-height: 1.4;
white-space: normal;
opacity: 0;
visibility: hidden;
box-shadow: 0 12px 24px rgb(0 0 0 / 20%), 0 0 0 1px rgb(0 0 0 / 4%);
z-index: 100;
}
.iblockcloudcnt {
display: inline-block;
text-align: left;
}
.iblockcloud:before {
content: '';
position: absolute;
height: 0;
width: 0;
border: 8px solid transparent;
top: 50%;
bottom: auto;
left: auto;
right: 100%;
margin-left: -8px;
margin: -8px 0 0;
border-top-color: transparent;
border-right-color: inherit;
}
.iblockcloud.activr:before {
right: auto;
left: 100%;
transform: rotate(180deg);
}
.iblockcloud.activtop:before {
right: auto;
left: auto;
transform: rotate(90deg);
top: -8px;
}
.iblockcloud.activbottom:before {
right: auto;
left: auto;
transform: rotate(268deg);
bottom: -16px;
top: auto;
}
.waakssbc {
position: relative;
display: inline-block;
}
.waakssbc a {
color: #434343;
font-size: 15px;
display: inline-block;
line-height: 30px;
padding: 0 20px;
text-decoration: none;
}
.waakssbc:hover .iblockcloud {
visibility: visible;
opacity: 1;
}
.iblockcloud.activl {
top: 0;
left: 100%;
margin-top: -30%;
}
.iblockcloud.activr {
top: 0;
right: 100%;
margin-top: -20%;
}
.iblockcloud.activtop {
top: 100%;
margin-top: 10px;
}
.iblockcloud.activbottom {
bottom: 100%;
margin-bottom: 10px;
}
Отлично не забываем сохранить!
Теперь давайте выберем место блок или ссылку где хотим вывести данный один из блоков, допустим выбрали ссылку при наведении на которую должен появляться блок к примеру с лева. что бы прикрепить к ней нужный блок просто копируем код ниже и вставляем его на место той самой ссылки но ссылку пока не удаляем!
Код
<span class="waakssbc">
<a href="">С право</a><!-- место для текста кнопки ссылки -->
<div class="iblockcloud activl">
<div class="iblockcloudcnt">
блок уведомлений от сайта talantlev.ucoz.ru и его администратора waaka для вас и вашего сайта
</div>
</div>
</span>
Отлично! теперь копируем вашу ссылку и вставляем её в место той что находится в коде, данная строка подписана как ( место для текста кнопки ссылки ) и так как в примере указана ссылка то её стираем и заменяем на свою ссылку кнопку или текст после чего меняем информацию в блоке на свою и не забываем сохранить!
Теперь как поменять направление блока от элемента? для этого есть четыре класса а именно
.activl -
.activr -
.activbottom и
.activtop которые отвечают за расположения текста от блока и если вам нужно поменять направления вы просто меняете класс у нужного блока на подходящий
О классах
- Текст с лева от блока .activl
- Текст с права от блока .activr
- Текст с верху от блока.activtop
- Текст с низу от блока:.activbottom
Думаю нечего сложного нет!
Так же сразу хочется сказать что так как на вашем сайте есть много стилей разных элементов то может быть искажения в выводе позиции блока то есть она может иметь не большие сдвиги и вам придётся подстроить её самостоятельно но я думаю что такое может быть только для левого и правого блока именно для этого и созданы отдельные классы для каждого блока что бы вы могли настраивать вывод каждого по отдельности.
Вопросы просьбы замечания пишите всё в комментариях!
Прикрепил к материалу архив с демо и добавил к блокам анимацию так что если вам нужно анимированные блоки то просто возьмите стили из прикреплённого архива, что бы вам не искать их там я их вывел на страницы перед кодом блоков в тег style
waak 
web_master 
