---
title: Create Tooltip using jQuery and CSS
description: >-
  You can learn here how amazingly you can create tooltip using jQuery, with a little help of CSS.
  Excellent article.
url: https://expiredqueues.com/how-to-create-a-tooltip-using-jquery/
date: '2010-01-05T12:53:01.000Z'
image: https://expiredqueues.com/images/og/how-to-create-a-tooltip-using-jquery-28e98cbf.jpg
---

Written in January 2010. Much of what it describes has since changed or disappeared; it is kept as a record of how the web used to work, not as advice.

Tutorials posts css

# Create Tooltip using jQuery

5 January 2010 By Adrian 4 min read

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 anywhere in your webpage.\
While creating this tooltip, it is assumed that you are familiar with html CSS. You need to know these techniques to understand the development.

## Pre-requirement

For creating a visually appealing tooltip, we need the following assets ready,

a.) Tooltip background image(Find awesome [UI freebies at Web Design Legder](http://webdesignledger.com/freebies/a-ui-design-and-prototyping-treasure-chest))

b.) Latest jQuery pack [(download here)](http://jquery.com)

[Download Source](https://expiredqueues.com/downloads/awesome_tooltip.zip)

Now create 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.

```html

<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

```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.\
![Nav bar preview](https://expiredqueues.com/images/opt/tooltip-nav-preview-320.jpeg)\
Now its time to make a tooltip.\
The idea behind creating tooltip is, when we take mouse over the nav bar, a tooltip should 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 shown on tooltip will come from the title attribute of \<a> tag.

## Write Scripts

```js

$(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 two more lines, add position:relative to \<a> tag so that tooltip aligned to relative \<a>; and CSS for our \<span>

```css

#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;
}
```

Hurray,\
[take a look](https://expiredqueues.com/demo/awesome_tooltip/)

We are done! Any new techniques there in your mind are appreciated to share.

[Previously Merry X-mas 2009 to you all.](https://expiredqueues.com/merry-x-mas-2009-to-you-all/) [Next 10 Exceptional animated navigation menus around the web.](https://expiredqueues.com/10-exceptional-animated-navigation-menu-around-the-web/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Create Tooltip using jQuery",
  "datePublished": "2010-01-05T12:53:01.000Z",
  "dateModified": "2010-01-05T12:53:01.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/how-to-create-a-tooltip-using-jquery/",
  "image": "https://expiredqueues.com/images/2010/tooltip-nav-preview.png",
  "keywords": "posts, css",
  "articleSection": "Tutorials"
}
```