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.

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

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.

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>

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.

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.

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

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”.

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.

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”.

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.

The result in the browser.

Visit www.likno.com

for more information