In this presentation we will show you how to create a stunning post-it looking jQuery tooltip that you can use in your websites/blogs. Likno Web Tooltips Builder is a powerful, feature-rich WYSIWYG application that helps you create any type of jQuery tooltips. You don't have to worry about coding as the application does all the coding for you.

1. How to create a stunning jQuery tooltip
using Likno Web Tooltips Builder
In this presentation, we will show you
how to create a notes style jQuery
tooltip using Likno Web Tooltips Builder.

2. Open Likno Web Tooltips Builder.
A welcome screen appears, choose the Tooltip Example 04 and click on
“Create new project from Example”.

3. A new window is displayed, choose the folder you want to save your
project, then type a file name in the “file name” field (for
example, notesTooltip) and Click on “Save” Button.

4. Go to Project Tooltips Tab, click on white area Text/HTML to add your tooltip content.
When you have finished typing your content then click “Apply & Close”.
In this case we have typed: <p>Tooltip Text</p>

5. Now, let’s change the style of the tooltip.
Go to Style Editor Tab Click on Tooltip CSS and the WYSIWYG CSS Editor will appear.
Change the CSS values you want and click “Apply & Close”.
In this presentation, we have changed the Text-Size from 14 px to 18 px.

6. Now, let’s change the way the tooltip will open/close.
Go to Style Editor Tab Click on Opens-How Effect and choose Grow and then
set the duration to 200ms. Do the same for the Closes – How.

7. Let’s preview the tooltip. It seems the way we wanted to be displayed.

8. It’s time to compile the tooltip project, so click on “Compile” icon and the
project properties will appear (for the first time). Choose the Site_Root Folder
the name (you can leave the default) and the domain and then click “OK”.

9. When compile is successfully done, the below window will appear. Click on
“Link compiled project to web pages” in order to link it to your pages that the
tooltip should be displayed.

10. This window will appear so you can choose the page/pages you want the
tooltip to appear. For this presentation, we have created a test.html which we
choose, click the arrows to select it and then click on “Link”.

11. We have created the tooltip, we have linked it to the page we want it but we need to
have the code that triggers the tooltip in the page. This is a page containing some
sample code and the <span ID=“Tooltip_1”></span>. You can use
ID=“Tooltip_1” in any html tag in order to trigger the tooltip we created.

12. The result in the browser.

13. Visit
www.likno.com
for more information