После длительного перерыва у меня появился новый материал для этой темы. Итак, мы будем делать красивые подсказки. У самого дошли до такого руки как раз только сегодня.
.gif)
Для начала нам нужно сделать стиль для наших новых подсказок:
.tooltip{
display: none;
background: #444;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
color: #fff;
font-size: 11px;
padding: 2px 6px;
position: absolute;
text-align: center;
min-width: 20px;
max-width: 200px;
}
.tooltip::after{
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #444;
content: '';
display: inline;
position: absolute;
left: 10px;
top: 100%;
}
Как вы видите это будут подсказки черного цвета с белым текстом шириной от 20 до 200 пикселов .tooltip::after создает черную стрелку внизу подсказки, направленную вниз(такой прием работает и в вап).
Теперь всё, что нам нужно это написать jQuery код, который будет при наведении курсора на элемент, имеющий атрибут title, удалять сам атрибут, а текст подсказки показывать в нашем блоке.
$(document).ready(function(){
$('*[title]').hover(function(e){
var title = $(this).attr('title');
$(this).data('titleText', title).removeAttr('title');
$('<p class="tooltip"></p>').html(title).appendTo('body').css('top', ($(this).offset().top - ($('p.tooltip').height() + 15)) + 'px').css('left', ($(this).offset().left + ($(this).width() / 2 - 16)) + 'px').fadeIn('medium');
},
function(){
$(this).attr('title', $(this).data('titleText'));
$('p.tooltip').remove();
});
});
Небольшой разбор кода: сначала мы получаем текст подсказки(это может быть HTML текст и он будет корректно отображатся!!!), сохраняем его в хранилищи data элемента и удаляем атрибут title, после этого создаем элемент tooltip с текстом подсказки и задаем его координаты.
Вторая функция внутри hover() исполняется, когда курсор уводится с элемента, эта функция возвращает всё к первоначальному состоянию.
Вот и всё.
Дополнение:
$('p.tooltip').height() -- высота элемента подсказки(width() -- ширина)
$(this).offset().top -- козиция элемента с верху документа, над которым ведутся манипуляции(вместо top можно указать left, right и bottom)
Скриншот прилагается. Кто хочет "пощупать" это сам, то смотрим сайт в анкете, именно для него и писались эти подсказки.
как я понял, JQ должен загружать содержимое файлов в див container, однако у меня просто загружает ту страницу.
