jQuery tooltipAugust 14, 2011
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:
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: