ToolTip подсказки Anim / Tooltip / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Tooltip

Для Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Уникальный ID: 379

Количество символов:

Посмотрели: 2511 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.3 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: tooltip, Snippet, html, сниппет, Bootstrap, подсказка

Поделился: BootstrapТема

Добавлено: 2015-12-28 в 11:35

Метка: 1581765583

⇄ ⇅

.tooltips span {
 font:300 12px 'Open Sans', sans-serif;
 position: absolute;
 color: #FFFFFF;
 background: #000000;
 padding: 10px;
 width: 160px;
 text-align: center;
 visibility: hidden;
 opacity: 0;
 filter: alpha(opacity=0);
 transition: transform .3s, opacity .6s, margin-left .2s, margin-top .2s
}

.tooltips > span > img{max-width:140px}

.tooltips[tooltip-position="top"] span{
 margin-left:10px;
 -ms-transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 transform: rotate(30deg);
}

.tooltips[tooltip-position="bottom"] span{
 -ms-transform: rotate(-30deg);
 -webkit-transform: rotate(-30deg);
 transform: rotate(-30deg)
}

.tooltips[tooltip-position="left"] span{
 margin-top:30px;
 -ms-transform: rotate(-30deg);
 -webkit-transform: rotate(-30deg);
 transform: rotate(-30deg)
}

.tooltips[tooltip-position="right"] span{
 margin-top:30px;
 -ms-transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 transform: rotate(30deg)
}

.tooltips span:after {
 content: '';
 position: absolute;
 width: 0; 
height: 0
}

.tooltips[tooltip-position="top"] span:after{
 top: 100%;
 left: 50%;
 margin-left: -8px;
 border-top: 8px solid black;
 border-right: 8px solid transparent;
 border-left: 8px solid transparent
}

.tooltips[tooltip-position="bottom"] span:after{
 bottom: 100%;
 left: 50%;
 margin-left: -8px;
 border-bottom: 8px solid black;
 border-right: 8px solid transparent;
 border-left: 8px solid transparent
}

.tooltips[tooltip-position="left"] span:after{
 top: 50%;
 left: 100%;
 margin-top: -8px;
 border-left: 8px solid black;
 border-top: 8px solid transparent;
 border-bottom: 8px solid transparent
}

.tooltips[tooltip-position="right"] span:after{
 top: 50%;
 right: 100%;
 margin-top: -8px;
 border-right: 8px solid black;
 border-top: 8px solid transparent;
 border-bottom: 8px solid transparent
}

.tooltips:hover span {
 visibility: visible;
 opacity: 1;
 z-index: 999;
 -ms-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 filter: alpha(opacity=100)
}

.tooltips[tooltip-position="top"]:hover span{
 bottom: 30px;
 left: 50%;
 margin-left: -76px
}

.tooltips[tooltip-position="bottom"]:hover span{
 top: 30px;
 left: 50%;
 margin-left: -76px
}

.tooltips[tooltip-position="left"]:hover span{
 right: 100%;
 top: 50%;
 margin-top: -15px;
 margin-right: 15px
}

.tooltips[tooltip-position="right"]:hover span{
 left: 100%;
 top: 50%;
 margin-top: -15px;
 margin-left: 15px
}

.tooltips[tooltip-type="primary"] > span {
 background-color:#2980b9
}

.tooltips[tooltip-type="primary"][tooltip-position="top"] > span:after{
 border-top: 8px solid #2980b9
}

.tooltips[tooltip-type="primary"][tooltip-position="bottom"] > span:after{
 border-bottom: 8px solid #2980b9
}

.tooltips[tooltip-type="primary"][tooltip-position="left"] > span:after{
 border-left: 8px solid #2980b9
}

.tooltips[tooltip-type="primary"][tooltip-position="right"] > span:after{
 border-right: 8px solid #2980b9
}

.tooltips[tooltip-type="success"] > span {
 background-color:#27ae60
}

.tooltips[tooltip-type="success"][tooltip-position="top"] > span:after{
 border-top: 8px solid #27ae60
}

.tooltips[tooltip-type="success"][tooltip-position="bottom"] > span:after{
 border-bottom: 8px solid #27ae60
}

.tooltips[tooltip-type="success"][tooltip-position="left"] > span:after{
 border-left: 8px solid #27ae60
}

.tooltips[tooltip-type="success"][tooltip-position="right"] > span:after{
 border-right: 8px solid #27ae60
}

.tooltips[tooltip-type="warning"] > span {
 background-color:#f39c12
}

.tooltips[tooltip-type="warning"][tooltip-position="top"] > span:after{
 border-top: 8px solid #f39c12
}

.tooltips[tooltip-type="warning"][tooltip-position="bottom"] > span:after{
 border-bottom: 8px solid #f39c12
}

.tooltips[tooltip-type="warning"][tooltip-position="left"] > span:after{
 border-left: 8px solid #f39c12
}

.tooltips[tooltip-type="warning"][tooltip-position="right"] > span:after{
 border-right: 8px solid #f39c12
}

.tooltips[tooltip-type="danger"] > span {
 background-color:#c0392b
}

.tooltips[tooltip-type="danger"][tooltip-position="top"] > span:after{
 border-top: 8px solid #c0392b
}

.tooltips[tooltip-type="danger"][tooltip-position="bottom"] > span:after{
 border-bottom: 8px solid #c0392b
}

.tooltips[tooltip-type="danger"][tooltip-position="left"] > span:after{
 border-left: 8px solid #c0392b
}

.tooltips[tooltip-type="danger"][tooltip-position="right"] > span:after{
 border-right: 8px solid #c0392b
}
</style>

<ol>
<li> <a href="#" class="tooltips" tooltip-position="right" tooltip="<img src='http://drawings-girls.ucoz.net/2015/08/lico-molodoi-devushki-s-ukrasheniyami.jpg' /><br/>Картинка в подсказке">ToolTip Картинка</a>
<li> <span class="tooltips" tooltip="Подсказка с верху" tooltip-position="top">Подсказка с верху</span>
<li> <span class="tooltips" tooltip="Подсказка с права" tooltip-position="right">Подсказка с права</span>
<li> <span class="tooltips" tooltip="Подсказка с низу" tooltip-position="bottom">Подсказка с низу</span>
<li> <span class="tooltips" tooltip="Подсказка с лева" tooltip-position="left">Подсказка с лева</span>
<li> <span class="tooltips" tooltip="Класс primary" tooltip-position="top" tooltip-type="primary">Класс primary</span>
<li> <span class="tooltips" tooltip="Класс success" tooltip-position="right" tooltip-type="success">Класс success</span> 
<li> <span class="tooltips" tooltip="Класс warning" tooltip-position="bottom" tooltip-type="warning">Класс warning</span>
<li> <span class="tooltips" tooltip="Класс danger" tooltip-position="left" tooltip-type="danger">Класс danger</span> 
</ol>

</div></div></div>

BootstrapTema

ToolTip подсказки Anim

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0