jQuery tooltip

Posted on by jordanhaines

A few months ago I was building 2 landing pages which needed a tooltip pop up to display the contact information for the client.

To save time we searched for a jquery plugin and found an excellent plugin called jQuery Tools Tooltip. This is an excellent plugin and it worked well on one of the landing pages, but for the second landing page we just could not get it to run properly, So I was forced to build my own little function.

I wanted to do this for two reasons, One I wanted to develop my understanding of jQuery better and I thought building my own solution would help me with that and the second is that if I can write my own function, the site may load quicker as well. I know we are only really talking about milliseconds here tho.

I am sure there is better ways to do this but this little function helped us out for a landing page and I have used a few times since then as well on other landing pages.

So lets begin!!!

Setting up the file structure

First we are going to setup the file structure or a example, I want to do this because first of all I see a lot of examples that show all the examples that use in-line code. I really hate this because it is bad practise, you should always separate your code. So this is what we are going to do.

Create a folder called jquery tooltip, In that folder we need an index.html file and two folders 1) style 2)scripts.

In the style folder we need to create a file called style1.css and then in the scripts folder we need to create a file called function.js.

Below is a diagram of what the folder structure should look like:

image showing the file structure

Now on to the coding part!, We will start with the HTML, The idea is we will have a paragraph of text with a link at the bottom users can hover over and see the information hidden in a tooltip.

The HTML is very simple and the structure is as follows:

{code type=html}

jQuery tooltip



{/code}

There is nothing hard about this code, We start with a Doctype, because I use HTML5 we only need to put at the top.
Next we give the page a title, and then tell the browser what character set we are using. Next comes the link to the CSS file.

After the CSS file link we place the jQuery link which look like this:

{code type=html}{/code}

There are two ways to get jQuery, The first way is to download it to your server and host the file yourself,or the second which is my favourite way of doing this is to provide a link to the file hosed on the Google CDN (Content Delivery Network). The main reason for this is better caching, so people only have to download jquery once and if they have already got it then they do not need to download it at all.

After the link to the jquery on Google CDN we link to our java script file:

{code type=html}{/code}

Now to add the content to the HTML, We want a paragraph of text, with a link at the bottom of the page and the tooltop to pop up above the link.

So lets add the elements we need:

{code type=html}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis vestibulum congue. Phasellus porttitor molestie mi id pretium. Duis nec ligula non leo dignissim euismod vestibulum nec leo. Nulla ligula lacus, feugiat ac lacinia vitae, tincidunt commodo enim. Suspendisse adipiscing pulvinar malesuada. In eget ligula leo, eu elementum mauris. Aenean sed hendrerit velit. Nunc scelerisque massa quis enim posuere vel fringilla diam sagittis. Vestibulum sodales, urna porta condimentum bibendum, neque magna interdum diam, eu dapibus arcu dolor in ipsum. Nulla facilisi. Suspendisse potenti. Nullam dapibus ultrices tortor, nec pulvinar orci condimentum dictum. Phasellus imperdiet turpis nec erat porttitor porta. Duis eu tristique orci. Fusce ac ipsum nisi, sit amet auctor orci. Integer consectetur augue sit amet orci rutrum dapibus. Etiam et leo nunc. Suspendisse feugiat ornare leo vitae consectetur.

  • 9 some road,
  • some town,
  • some area,
  • some postcode

Tel: 08900 666 555

Contact Details

{/code}

Let me just explain what is going on here, first of all I make a div and call it page wrap, this helps keep everything together and helps with styling. With in the page wrap div, we had the paragraph of text. Under that we create a div with a class of tooltip and in that div we can put our contact information or what ever information we wish, Under the tooltip div we add another paragraph tag and put the text Contact Details.

The next part is the CSS, The code is below, I am not going to explain this because it all standard. The only thing that does need to be said is that the div with a class of tooltip is set to display: none and position absolute. This is important so do not forget this part.

{code type=css}#page-wrap { position: relative; width: 400px; margin: 20px auto; padding: 0;}

.tooltip { position: absolute; left: 0; bottom: 30px; width: 200px; background-color: #525252; color: #fff; padding: 10px; display: none;}
.tooltip ul,
.tooltip p { margin-left: 20px;}

#contact_details { padding: 10px; margin: 0 0 10px; 0; background-color: #7f7f7f; color: #fff; display: inline; }{/code}

The next part is the all important jQuery which we will use. The idea behind the jQuery is we want to fade in the tooltip div when the user hovers over the Contact Details text and then fadeOut the details when the move off the Contact Details text. Here how I did it:

{code type=javascript}$(document).ready(function(){

$(‘#contact_details’).hover(over, out);

function over(event) {
$(‘.tooltip’).fadeIn();
return false;
}

function out(event) {
$(‘.tooltip’).fadeOut();
return false;
}

});{/code}

Let me explain the code, First we write out document get ready function, this makes sure that none of our jQuery runs in till the page is fully loaded.

The next part is to attach the hover function to the paragraph with the id of contact_details. This is the paragraph with the text Contact Details in it. To attach the hover function to the contact_details paragraph is shown below:

{code type=javascript}$(‘#contact_details’).hover(over, out);{/code}

When you call the hover function, you need to name the two function that it will use, the first one (Over) and the second function (Out). The first function is called when the hover is activated, the second function is activated when the user moving out of the hover area.

The next step is to write the Over function and Out function. See the functions below:

{code type=javascript}function over(event) {
$(‘.tooltip’).fadeIn();
return false;
}

function out(event) {
$(‘.tooltip’).fadeOut();
return false;
}{/code}

Lets have a look at the functions, I am only going to explain the over function as the out function is the same just with fadeOut instead of fadeIn.

First we nave the function which is called over, with the curly brackets we attach the fadeIn effect to the tooltip div. After that we have to return false, this stops the browsers default behaviour taking effect.

That is it!! when you test the web page, you should get a nice fade in and fade out effect. If you would like to download the source files you can here.

This entry was posted in JQuery and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *