Unitip tooltip in Freeway Pro

Author: Bart de Vreede
Last update: 03-05-2013

To make your website even more attractive you can add tooltips to highlight parts that you think are important and deserve a bit more attention from the visitor.

Hover over the Macbook Pro image below.

Cool stuff huh!

To do this we use a bit of code called Unitip and we need to add a bit of code to your Freeway Pro project.

Here we go!

Download the unitip zip file here Download
Unzip and upload this folder to the root of your website
Make sure all the read/write rights are ok for the folder and it's contents (CHMOD). Mine are 755.
Go to your Freeway Pro project
On all pages you want to use this effect go to Page / HTML Markup / Before </head> paste the following code
<link rel="stylesheet" type="text/css" href="http://www.yourwebsitesurl.com/unitip/css/unitip.css" /><script type="text/javascript" src="http://www.yourwebsitesurl.com/unitip/js/unitip.js"></script>
Change www.yourwebsitesurl.com into your websites url
Now go to the item on that page you want to apply the tooltip to
Right click, choose extended and click new
In the field name fill in class
In the field Value fill in tool and click ok
Make sure the item you want the tooltip to be applied to is selected and go to the Inspector Palette
Go to the third tab and make sure the ALT text box is activated
The text you type in this ALT text field will be the text used for your tooltip
Upload your Freeway Pro project to your web server and it should be working

IMPORTANT! This effect will not work on mobile devices since it's needs a mouse pointer to hover over the image with the tooltip applied to it.

>> click here to go back to the homepage

Article tags: Freeway Pro, tooltip, tool tip, unitip, javascript, how to, text balloon