jQuery Tooltip

Create Tooltip using jQuery

Tooltips are visually appealing, very user friendly way to notify users. Today we are going to make a tooltip using jQuery that you can use it anywhere in your webpage.
While creating this tooltip, this is assumed that you are familier with html CSS. You need to know these techniques to understand the development.

Pre-requirement

For creating a visually appealing tooltip, we need following assets ready,
a.) Tooltip background image(Find awesome UI freebies at Web Design Legder)

b.) Latest jQuey pack (downlaod here)

Download Source

Now creat a html page and save it in your project root folder
place image (which you created or downloaded for tooltip background) and downloaded jQuery in project directory

Write html

link the jquery file to this html page.

<div id="nav">
	<ul>
		<li><a href="#" title="nav link 1">nav link 1</a></li>
		<li><a href="#" title="nav link 2">nav link 2</a></li>
		<li><a href="#" title="nav link 3">nav link 3</a></li>
		<li><a href="#" title="nav link 4">nav link 4</a></li>
		<li><a href="#" title="nav link 5">nav link 5</a></li>
	</ul>
</div>

Write CSS

#nav{
	height:40px;
	background:#f0f0f0;
	border:1px solid #e0e0e0;
	width:600px;
	margin:150px auto 0;
	font-family:"trebuchet MS", verdana, arial;
	font-size:13px;
}
#nav ul {
	margin:0;
}
#nav ul li{
	list-style:none;
	display:inline;
}
#nav ul li a{
	color:#333;
	text-decoration:none;
	display:block;
	float:left;
	padding:0 15px;
	text-align:center;
	height:40px;
	line-height:40px;
}
#nav ul li a:hover {
	background:#e0e0e0;
	border-left:1px solid #c0c0c0;
	border-right:1px solid #c0c0c0;
	padding:0 14px;
}

Now preview it, we have a cool nav bar.
preview
Now its time to make a tooltip.
The idea behind creating tooltip is, when we take mouse over the nav bar, a tooltip shouls show.
How we gonna achieve this is, we will add a <span> inside <a> tag using jquery, and when we mouseover on <a>, <span> will come to show in an animated way and when we mouse outs, <span> will disappear like magic. Text shows on tooltio will come from title attribute of <a> tag.

Write Scripts

$(document).ready(function(){

	//this line(below) will add <span> inside the <a> all tag.
	$('#nav ul li a').append('<span></span>');

	//state when tooltip required. Generally jquery hover contains two states, a.) mouseover and b.) mouseout
	$('#nav ul li a').hover(
		function(){ //function for mouse overs
			$(this).find('span').animate({opacity:'show', top: '-70'}, 'slow');

			//taking title texts of <a>
			var hoverTexts = $(this).attr('title');
			//adding title texts to <span>
			$(this).find('span').text(hoverTexts);
		},

		function(){ // function for when mouse outs
			$(this).find('span').animate({opacity:'hide', top: '-90'}, 'fast');
		}
	);
});

Almost done, just more two lines, add position:relative to <a> tag so that tooltip aligned to relative <a>; and CSS for our <span>

#nav ul li a span{
	background:url(images/tooltip_bg.png);
	width:159px;
	height:66px;
	line-height:50px;
	position:absolute;
	display:none;
	top:-90px;
	color:#000;
	left:-37px;
}

Hurry,
take a look

we have done! any new techniques is there in your mind, is appreciated to share.

Comments

comments

Powered by Facebook Comments

280 thoughts on “Create Tooltip using jQuery”

  1. Здраствуйте, не знаю куда писать напишу сюда. Я подписался на рсс вашего сайта, а текст отображается иероглифами помогите пожалуйста, можно на e-mail

  2. Hey – thanks for the tip! CSS is the one thing I just don’t seem to get… and I know how to code C++, .NET, PHP, MySQL, etc. You do any work on the side? Anyhow… cool site – I’m subscribed to your feed now so I’ll be checking in regularly!

  3. Поставка приборов украинского и российского производства. Инфракрасные настенные обогреватели, электрические обогреватели, алкотестеры, газонализаторы, дымомеры, газосигнализаторы. термостаты. Поставка во все регионы Украины и РФ. Безналичный расчет

  4. Да, интернет – огромен, если и такое даже можно найти 😉

  5. Спасибо за интересный материал, почитал несколько Ваших записей, очень понравилось, продолжайте дальше!

  6. I went here looking for dark culture! This post has a nice visibility on google even if it wasn’t sadly the post I was looking for

  7. Смеяться не грешно, но признаваться в этом при чтении подобной информации по крайней мере удивило меня!:))

  8. Промто ! 😉 Сегодня по Спорту будет трансляции Матчи Уефа – Не пропустите ! Играют Центральный Спортивный Клуб Армии и Спартак.

  9. Хороший пост, прочитав пару книг на тему всё таки не взглянул со стороны, а пост как-то задел.

  10. Большое спасибо! Есть ещё повод получить удовольствие… С вашего разрешения, беру.

  11. Вы знаете редко сейчас кто пишет по данной тематике, очень приятно читать, я бы советовала картинок добавить еще!

  12. вы шутите…21 век на дворе, неужели нет ничего достойного внимания, как энциклопедия.Милые мои, вот нет снега в гордах, это тоже тема и история, пересмотрите темы.Я почту просматриваю, мне шлют не пойми что, не знаю кто, столько мусора, может оно и нужно, но не в дневнике.Я так понимаю, дневник это часть твоей души.Нам дается право выбирать – пользуйтесь. А информация бесполезной не бывает

  13. Не пойму в чём дело, но у меня тока 2 картинки загрузилось. ((( А ваще понравились! 🙂

  14. Да уж. В этом блоге хоть комментаторы нормальные.. А то пишут обычно в комментарии ерунду всякую.

  15. Мне кажется идея в этой статье раскрыта не до конца. Автор, может что-то добавишь к этому ?

  16. Это то что я давное искал. Самый самый лучщий новост. Спасибо автору за новость

  17. Огромное вам пасибо! а еще посты на эту тему будут в будущем? Очень жду!

Leave a Reply to Anton Cancel reply

Your email address will not be published.