Както се вижда от заглавието днес ще се опитам да ви ударя едно рамо в създаването на приличен tooltip с няколко реда код. В духа на FridayCode урокът е простичък, но приложим на доста места, така че се надявам да бъде полезен на повече хора.
Тъй като материята, за която ще поговорим днес има някои особености, аз си позволих да направя два примера, с които да ви илюстрирам по-добре какво имам предвид.
| View DemoDownload |
Ако вече сте разгледали демото няма как да не обърнете внимание на факта, че на пръв поглед няма почти никаква разлика между двата метода, но повярвайте не е така. Основната разлика е мястото, от което се взима информацията, с която пълним tooltip-a. Единият метод я взима от html елемент, а другият от атрибута title. Нека започнем с първия метод, защото предполагам, че при него ще схванете идеята по-бързо.
Tooltip от Element
За примера на този метод съм използвал простичък списък съставен от линк, изображение и <span>, от който ще "крадем" информация.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Направете си набързо Tooltip с jQuery</title> <link rel="stylesheet" href="css/tooltip_element.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/tooltip_element.js"></script> </head> <body> <div id="content"> <h2>Информацията се взима от друг елемент</h2> <div> <ul> <li> <a href="#"><img src="img/1.jpg" alt="" /></a> <span><b>Люк Скайуокър</b>25 години, мъж, София</span> </li> <li> <a href="#"><img src="img/2.jpg" alt="" /></a> <span><b>Билбо Бегинс</b>156 години, мъж, Пловдив</span> </li> <li> <a href="#"><img src="img/3.jpg" alt="" /></a> <span><b>Индиана Джоунс</b>60 години, мъж, Храмът на обречените</span> </li> <li> <a href="#"><img src="img/4.jpg" alt="" /></a> <span><b>Шехерезада</b>1001 години, жена, с. Гълъбово</span> </li> <li> <a href="#"><img src="img/5.jpg" alt="" /></a> <span><b>Крали Марко</b>13 години, мъж, Варна</span> </li> <li> <a href="#"><img src="img/6.jpg" alt="" /></a> <span><b>Димитър Бербатов</b>30 години, мъж, Манчестър</span> </li> <li> <a href="#"><img src="img/7.jpg" alt="" /></a> <span><b>Хари Потър</b>22 години, жена, Благоевград</span> </li> <li> <a href="#"><img src="img/8.jpg" alt="" /></a> <span><b>Бойко Борисов</b>Immortal, мъж, София</span> </li> <li> <a href="#"><img src="img/9.jpg" alt="" /></a> <span><b>Анонимен</b>15 години, жена, Бургас</span> </li> <li style="margin: 0;"> <a href="#"><img src="img/10.jpg" alt="" /></a> <span><b>Леонид</b>45 години, мъж, Спарта</span> </li> </ul> </div> </div> </body> </html>
Ако искате да разгледате целия CSS ето го и него.
CSS
body {
margin: 0;
padding: 0;
font-size: 11px;
font-family: Tahoma, Arial, Verdana, sans-serif;
line-height: 1.3em;
background: #FFF;
color: #666;
}
a, a:link, a:visited { outline: none; text-decoration: none; }
a:hover { text-decoration: none; }
ul { padding: 0; margin: 0; list-style: none; }
#content {
width: 654px;
margin: 100px auto;
}
#content h2 {
font-family: Georgia, serif;
font-size: 20px;
font-weight: 400;
color: #555;
border-bottom: 1px solid #dedede;
padding: 0 0 15px;
margin: 0 0 10px;
text-align: center;
}
div.friends ul li {
position: relative;
float: left;
margin: 0 6px 6px 0;
}
div.friends ul li a.friend img {
padding: 4px;
border: 1px solid #ddd;
}
div.friends ul li a.friend:hover img {
border: 1px solid #aaa;
}
div.friends ul li span {
display: none;
}
div.tooltip {
display: none;
position: absolute;
top: 72px;
left: 0;
width: 210px;
height: 40px;
border: 1px solid #ddd;
background: #f9f9f9;
padding: 10px;
z-index: 10;
color: #666;
}
div.tooltip b {
display: block;
font-family: Arial, sans-serif;
font-size: 14px;
color: #3b5998;
}
div.tooltip div.arrow {
position: absolute;
top: -6px;
left: 10px;
width: 11px;
height: 6px;
background: url(../img/arrow.gif) no-repeat left top;
}
Като цяло HTML-a, както винаги трябва да бъде добре написан, за да пишете по-малко javascript. CSS-а в случая не играе особена роля и разчита на вашите предпочитания за това как да изглежда tooltip-чето.
jQuery
Веднъж изградите ли си логиката на действие, нещата стават много лесни. Каква е нашата цел? Да вземем информацията от <span> (независимо по какъв начин тя е поставена там) и да я прехвърлим в новосъздаден елемент. Всъщност не е задължително елемента да е новосъздаден. Може да съществува, но първоначално да е скрит. Все пак за примера ние създаваме такъв, което ще добави няколко милисекунди в лоудинг процеса, но това изобщо не се усеща така или иначе. И така с две думи - при ховър на снимката ние взимаме информацията от <span>-a, създаваме нов <div> и го правим част от списъка. След това на този <div> му добавяме малко анимацийка и вкарваме съдържанието в него. Аз му слагам и още един <div>, който представлява малката стрелкичка най-отгоре на кутията, но тя не е задължителна. Накрая, след като преместим мишката другаде (hoverOut) този <div> не ни е необходим и го изтриваме. Процесът се повтаря. По-долу всичко е обяснено ред по ред, така че се надявам да ме разберете.
$(document).ready(function ()
{
$('div.friends a').hover(function () {
var userInfo = $(this).next().html(); //Взимаме текста (заедно с таговете) от елемента до <a>, който в случая е <span>.
var tooltipBox = $('<div class="tooltip"></div>'); //Създаваме <div>.
$(this).parent().append(tooltipBox); //"Закачаме" този <div> към съответното <li> от списъка, за да е по-подредено.
$(tooltipBox).animate({'opacity' : 'toggle', 'top' : '80px' }, 200).html(userInfo).append('<div class="arrow"></div>'); //Добавяме малко ефекти на Tooltip-а и вкарваме информацията в него. Накрая му добавяме и лека козметична заигравка - стрелкичката.
}, function(){
$('div.tooltip').remove(); //При hoverOut изтриваме Tooltip-a.
});
});
Обърнете внимание, че на 4-тия ред взимаме текста с .html(), а не с .text(). Пояснявам за тези, които не разбират разликата - с първото взимаме текста + HTML таговете, докато с второто взимаме само чистия текст. Имайте едно на ум, когато работите над ваши проекти.
Ако все пак имате съвсем елементарна галерийка и ви трябват чисто и просто един линк и едно изображение, то за източник на информация може да използвате атрибута title на един от двата елемента. Този метод ще разгледаме по-надолу.
Tooltip от Title
Тук за разлика от горния пример имаме по-компактен вариант на HTML-а, тъй като все пак разглеждаме елементарен пример.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Направете си набързо Tooltip с jQuery</title> <link rel="stylesheet" href="css/tooltip_title.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/tooltip_title.js"></script> </head> <body> <div id="content"> <h2>Информацията се взима от атрибута "title"</h2> <div class="friends"> <a href="#" class="friend" title="Люк Скайуокър"><img src="img/1.jpg" alt="" /></a> <a href="#" class="friend" title="Билбо Бегинс"><img src="img/2.jpg" alt="" /></a> <a href="#" class="friend" title="Индиана Джоунс"><img src="img/3.jpg" alt="" /></a> <a href="#" class="friend" title="Шехерезада"><img src="img/4.jpg" alt="" /></a> <a href="#" class="friend" title="Крали Марко"><img src="img/5.jpg" alt="" /></a> <a href="#" class="friend" title="Димитър Бербатов"><img src="img/6.jpg" alt="" /></a> <a href="#" class="friend" title="Хари Потър"><img src="img/7.jpg" alt="" /></a> <a href="#" class="friend" title="Бойко Борисов"><img src="img/8.jpg" alt="" /></a> <a href="#" class="friend" title="Анонимен"><img src="img/9.jpg" alt="" /></a> <a href="#" class="friend" title="Леонид" style="margin: 0;"><img src="img/10.jpg" alt="" /></a> <div class="clr"></div> </div> </div> </body> </html>
Както сами виждате ще взимаме информацията от атрибута title на линка, като отново няма значение по какъв начин тя е поставена там (т.е. ръчно или се взима отнякъде). Минусът тук е, че не може да стилизирате части от текста подобаващо, заради липсата на тагове, но обикновено това не се налага в този случай. Все пак ако решите, че ви трябва нещо подобно, едно от решенията може да прочетете нагоре.
И така, CSS-ът отново е "скрит", защото не е от голяма важност.
CSS
body {
margin: 0;
padding: 0;
font-size: 11px;
font-family: Tahoma, Arial, Verdana, sans-serif;
line-height: 1.3em;
background: #FFF;
color: #666;
}
a, a:link, a:visited { outline: none; text-decoration: none; }
a:hover { text-decoration: none; }
.clr { clear: both; height: 0; line-height: 0; font-size: 0; }
#content {
width: 654px;
margin: 100px auto;
}
#content h2 {
font-family: Georgia, serif;
font-size: 20px;
font-weight: 400;
color: #555;
border-bottom: 1px solid #dedede;
padding: 0 0 15px;
margin: 0 0 10px;
text-align: center;
}
div.friends a.friend {
position: relative;
float: left;
margin: 0 6px 6px 0;
}
div.friends a.friend img {
padding: 4px;
border: 1px solid #ddd;
}
div.friends a.friend:hover img {
border: 1px solid #aaa;
}
div.tooltip {
display: none;
position: absolute;
top: 72px;
left: 0;
width: 180px;
height: 15px;
border: 1px solid #ddd;
background: #f9f9f9;
padding: 10px;
z-index: 10;
color: #3b5998;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 700;
}
div.tooltip div.arrow {
position: absolute;
top: -6px;
left: 10px;
width: 11px;
height: 6px;
background: url(../img/arrow.gif) no-repeat left top;
}
Предполагам, че нещата вече са ви познати, така че може направо да прескочим към най-важната част.
jQuery
Ако забелязвате, тук имаме малко повече код от предния пример и има защо. В този случай логиката отново е същата с няколко дребни нововъведения, които могат да са ви адски полезни. Нека отново разгледаме кода стъпка по стъпка. На първо място взимаме информацията от атрибута title на линка. Създаваме нов <div> и го прикачаме към конкретното <a>. След това анимираме новосъздадения tooltip и слагаме текста, взет от атрибута title. Накрая добавяме и добре познатата стрелкичка за разкош. При hoverOut отново изтриваме tooltip-a.
$(document).ready(function ()
{
$('div.friends a').hover(function () {
var hrefTitle = $(this).attr('title'); //Взимаме съдържанието от атрибута title на линка <a>.
var tooltipBox = $('<div class="tooltip"></div>'); //Създаваме <div>.
$(this).append(tooltipBox); //"Закачаме" този <div> към съответното <а>, за да е по-подредено.
$(tooltipBox).animate({'opacity' : 'toggle', 'top' : '80px' }, 200).text(hrefTitle).append('<div class="arrow"></div>'); //Добавяме малко ефекти на Tooltip-а и вкарваме информацията в него. Накрая му добавяме и лека козметична заигравка - стрелкичката.
}, function(){
$('div.tooltip').remove(); //Изтриваме Tooltip-a.
});
});
Обръщате ли внимание на нещо? Всъщност кода е 1:1 с предния пример! Къде е уловката? Ако пробвате този вариант ще видите, че освен новосъздадени tooltip, който си работи чудесно, ще виждате и стандартния, който самият браузър слага. За това ние трябва да изтрием съдържанието на атрибута веднага след като сме го взели. Ако ви звучи объркващо, то представете си, че му правим един вид копие. Така запазваме копието и изтриваме оригинала за момента. Това става чрез този ред.
$(this).attr('title', ''); //Изтриваме съдържанието на атрибута title на линка <a>.
Идва и следващата хватка, за която трябва да внимавате. След като изтрием съдържанието на title-a и го покажем в новосъздадения tooltip, а след това махнем мишока и отново се върнем на същата снимка, ще видим празен tooltip. Защо? Логично, все пак сме изтрили съдържанието на атрибута. Решението е просто - трябва да го върнем на мястото му преди да завърши целият процес. Т.е. при hoverOut трябва да вземем съдържанието от tooltip-a и да си го върнем на мястото, и чак след това да изтрием самия tooltip. Ето и как става това:
var imgTitle = $('div.tooltip').text(); //При hoverOut взимаме текста от Tooltip-a.
$(this).attr('title', imgTitle); //Връщаме този текст в атрибута title.
Вече сме "убили" браузърския tooltip и можем да се гордеем, че сме направили изцяло наш. Ето и крайния jQuery код, готов за действие.
$(document).ready(function ()
{
$('div.friends a').hover(function () {
var hrefTitle = $(this).attr('title'); //Взимаме съдържанието от атрибута title на линка <a>.
$(this).attr('title', ''); //Изтриваме съдържанието на атрибута title на линка <a>.
var tooltipBox = $('<div class="tooltip"></div>'); //Създаваме <div>.
$(this).append(tooltipBox); //"Закачаме" този <div> към всяко <а>, за да е по-подредено.
$(tooltipBox).animate({'opacity' : 'toggle', 'top' : '80px' }, 200).text(hrefTitle).append('<div class="arrow"></div>'); //Добавяме малко ефекти на Tooltip-а и вкарваме информацията в него. Накрая му добавяме и лека козметична заигравка - стрелкичката.
}, function(){
var imgTitle = $('div.tooltip').text(); //При hoverOut взимаме текста от Tooltip-a.
$(this).attr('title', imgTitle); //Връщаме този текст в атрибута title.
$('div.tooltip').remove(); //Изтриваме Tooltip-a.
});
});
Както сами виждате, отново следваме простата логика и нещата се получават. С малко повече въображение и писане може да направите къде-къде по-сложни tooltip-ове, в които да изобразявате например снимка, данните на някой и какво ли още не. Изобщо може да си имате специално пригоден HTML темплейт. Удоволствието да си човъркате ще оставя на вас. Надявам се да съм бил полезен, ако не с код, то поне с идеи!
Не му е тук мястото, но искам да кажа колко полезен и eye-candy блог сте направили :). Ще го следя с интерес, да погледнеш как го правят други колеги винаги е добър източник на идеи и вдъхновение.
Успех!
Благодарим! :) Радваме се, че сме ти полезни. Ще даваме всичко от себе си и за в бъдеще.
P.S. Блогът ти доста ни допада :)
Здравей,
много полезен код...даде ми крила да се опитам да го пригодя за конкретната си цел и съм на една идея от успеха. Задала съм tooltip-а да се показва на hover на li (който знаем е блоков елемент), но проблемът ми е, че в това li има повече от един елемент и js съответно се apply-ва на всеки елемент. Резултата е появата на бъг - tooltip-а ту се показва, ту се крие. Ще оценя, ако имаш време и желание да ми помогнеш!
Ето и javascript-a
$(document).ready(function (){
var showCat = 'Show this category';
var hideCat = 'Hide this category';
var show = 'Show this channel';
var hide = 'Hide this channel';
var tooltipBox = $('<div class="tooltip"></div>');
$('li.all').live('mouseover mouseout', function(event) {
$(this).append(tooltipBox);
if (event.type == 'mouseover') {
if ($(this).find('input').is(':checked')){
$(tooltipBox).animate({'opacity' : 'toggle', 'top' : '-52px' }, 200).html(hideCat).append('<div class="arrow"></div>');
} else {
$(tooltipBox).animate({'opacity' : 'toggle', 'top' : '-52px' }, 200).html(showCat).append('<div class="arrow"></div>');
}
$(this).css('color', '#006699');
} else {
$('div.tooltip').remove();
$(this).css('color', '#000');
}
});
$('li.item').live('mouseover mouseout', function(event) {
$(this).append(tooltipBox);
if (event.type == 'mouseover') {
if ($(this).find('input').is(':checked')){
$(tooltipBox).animate({'opacity' : 'toggle', 'top' : '-52px' }, 200).html(hide).append('<div class="arrow"></div>');
} else {
$(tooltipBox).animate({'opacity|' : 'toggle', 'top' : '-52px' }, 200).html(show).append('<div class="arrow"></div>');
}
$(this).css('color', '#006699');
} else {
$('div.tooltip').remove();
$(this).css('color', '#000');
}
});
});
С удоволствие ще помогна, но така описан проблема, всъщност не ми се вижда проблем... По-скоро е нещо друго. Ако имаш възможност да дадеш линк към някое демо или поне да пратиш архив с html, css и т.н., за да видя какво точно се случва. Може да пратиш на общия мейл, който може да намериш в контактите или пък да драснеш на скайп ripsterbg.
Страхотен блог и много полезни уроци :) Благодаря!
Благодаря ! Търсих нещо подобно и има купища в нета, но това наистина ми свърши страхотна работа и е направено много добре! Евала на автора и успех в бъдеще :)
Здравейте.
Това са найстина добри уроци.Хубаво е, че има кой-да помага на по слабите разрабочици.