How to create a stunning jQuery tooltip using Likno Web Tooltips Builder
Upcoming SlideShare
Loading in...5
×
 

How to create a stunning jQuery tooltip using Likno Web Tooltips Builder

on

  • 887 views

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

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.

Statistics

Views

Total Views
887
Views on SlideShare
886
Embed Views
1

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

How to create a stunning jQuery tooltip using Likno Web Tooltips Builder How to create a stunning jQuery tooltip using Likno Web Tooltips Builder Presentation Transcript

  • 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