Here you can read about an interesting Use Case of a very powerful feature of Likno Web Tooltips Builder, that is actually utilized on our own website (as of May 2012).

If you visit any page of our Likno.com website (http://www.likno.com for example), you will notice that a Likno tooltip appears when placing the mouse over any image (icon) of the "See Also" section (at the top part of the page):

SNAGHTMLbcaa63b

The interesting part here is that each image (icon) shows the same tooltip but with different content; this content is automatically retrieved from the image's "ALT" attribute.

This means that you can dynamically change the content of a tooltip by just using a different value on the "alt" attribute (in this case) OR any other custom attribute of yours.

This capability is explained in detail here: LWTT: "In Page" feature – How to open the *same tooltip with different content*, retrieved from the page’s HTML (on-the-fly)

HOW THIS IS IMPLEMENTED ON OUR WEBSITE

If you view the source code of the likno page, you will see the following code for the 1st icon ("img") of that section:

SNAGHTMLc246334

After the code screenshot above, you see the interface screenshot of the related Likno Web Tooltips Builder project, which uses the following values:

1. The "In Page" option as the Source of the tooltip's content. This means that the content of each tooltip will be retrieved from the page, dynamically.

2. The "Retrieve the content from the "title" (or "alt") attribute of page elements" option. This means that our script parses the entire page and qualifies all elements that use a "title" or "alt" attribute as potential tooltip "triggers", with their "title" or "alt" attribute values being the content of the tooltip that they will trigger.

3. The "SOME of the page elements that use the above attribute" value at the Opens When ("Trigger") property. This means that we do NOT want ALL the images of the page that use the "alt" attribute (or any page element that uses the "title" attribute) to show a tooltip. Instead we want to restrict this behavior only to those elements that ALSO use the Class="acc_hd" value in their tags.

So, if you mouse over any other image on the same web page (that uses the "alt" attribute) you will see that this tooltip does not appear for them.

For example, no tooltip appears when mousing over the top-left image (the "liknosoftware" logo):

SNAGHTMLc339819

Why?

Because while it does have an "alt" attribute (first matching criterion) in its tag, it does NOT have the Class="acc_hd" value (second matching criterion):

SNAGHTMLc4bb23e

You realize that you can use this feature with many combinations, which makes it rather powerful.

If you want to learn more about all possible options, please read the related topic here:

LWTT: "In Page" feature – How to open the *same tooltip with different content*, retrieved from the page’s HTML (on-the-fly)

Tags: , , , , , , , , , , , , , , , , , , , ,

 

The tooltip shows content which is retrieved from a specified attribute (like "title", "alt", your own attribute, etc.) that exists on the tooltip's "trigger" element.

View tooltip examples that use the "In Page" feature here

This feature is quite powerful, as you can open the same tooltip with different content that simply exists on each element that opens it ("trigger" element). You do not have to specify any content inside the application, you just edit your page to add/update/remove your tooltip's content per element.

In addition, this feature can be used on any page element that uses the specified attribute OR it can be restricted to some of these elements through conditions of yours (read the "Opens - When" section below).

Examples with the "title" (or "alt") attribute:

image

<a href='info.html' title='Show this text inside a tooltip!'>Info</a>
<img src='image.gif' alt='Show this text inside a tooltip!' />

Note: the "alt" attribute applies only to images, all other elements (tags) should use the "title" attribute OR your custom one.

Read how we use the "alt" option (combined with the "SOME" option) on our own website here:
Use Case: Tooltip content retrieved from "Page", from the "ALT" attribute of "SOME" elements that use a specific "CLASS" value (only)

<img src='image.gif' title='Show this text inside a tooltip!' />
<div title='Show this text inside a tooltip!'>
Blah... Blah... Blah...
</div>
<span title='Show this text inside a tooltip!'>
Blah... Blah... Blah...
</span>

 

You can use the "title" attribute on any elements you like, such as links ("a" tag), table cells ("td" tag), images ("img" tag), DIVs ("div" tag), SPANs ("span" tag), etc. The "alt" attribute can also be used for images ("img" tags only). This feature can be very useful if you want to automatically replace the standard browser tooltips with stylish ones.

Same examples but with a custom attribute instead of the "title" (or "alt") attribute:

image

<a href='info.html' likno_tooltip='Show this text inside a tooltip!'>Info</a>
<img src='image.gif' likno_tooltip='Show this text inside a tooltip!' />
<div likno_tooltip='Show this text inside a tooltip!'>
Blah... Blah... Blah...
</div>
<span likno_tooltip='Show this text inside a tooltip!'>
Blah... Blah... Blah...
</span>

 

All the above page elements show the following content on your project's tooltip:

image

 

HOW TO SHOW ADVANCED (RICH) CONTENT (instead of simple text)

You have several methods to choose from:

<a href='info.html' likno_tooltip='<p>Show me in <b>BOLD</b></p>'>Info</a>

This example shows that you can have HTML (instead of simple text) as the value of the attribute. Be careful however because quotes or special characters can break it.

Instead, you may use the "ID" or "CLASS" method (presented below) for showing complex HTML on the tooltip without any problems!

<a href='info.html' likno_tooltip='lwtt_content[id=myID21]'>Info</a>

<div id='myID21' style='display:none;'>

<p> ANY HTML WITHIN THIS DIV WILL SHOW AT THE TOOLTIP ABOVE </p>

</div>

...or...

<img id='myID21' style='display:none;' src='http://www.mysite.com/image1.gif' />

...etc.

You can use the "ID" attribute on any page element you like.

<a href='info.html' likno_tooltip='lwtt_content[class=myClass43]'>Info</a>

<div class='myClass43' style='display:none;'>

<p> ANY HTML WITHIN THIS DIV WILL SHOW AT THE TOOLTIP ABOVE </p>

</div>

...or...

<img class='myClass43' style='display:none;' src='http://www.mysite.com/image1.gif' />

...etc.

You can use the "CLASS" attribute on any page element you like.

<a href='info.html' likno_tooltip='lwtt_content[imageurl=http://www.mysite.com/image1.gif]'>Info</a>

This example shows that you can have a reference to an image as the value of the attribute. This image is shown at the tooltip.

<a href='info.html' likno_tooltip='lwtt_content[ajaxurl=http://www.mysite.com/products.html]'>Info</a>

This example shows that you can have a reference to an internal web page (note: within the same site and without javascripts) as the value of the attribute. That page is shown at the tooltip.

 

Needless to say that the above examples can use the "title" attribute instead of the custom attribute, it is your choice.

 

WHAT ABOUT "ANY" or "SOME"?

As mentioned above, the "attribute" feature can be used on any element OR only some (specific) elements of the page. You can choose this behavior through the "Opens - When" property below:

image

 

Example 1 for "SOME" elements:

image

This image shows a Likno tooltip:

<img id="id23" src="image.gif" alt="Show this text inside a tooltip!" />

…but these ones not:

<img id="other_id" src="image.gif" alt="Show this text inside a tooltip!" />
<img src="image.gif" alt="Show this text inside a tooltip!" />

 

Example 2 for "SOME" elements:

image

This image shows a Likno tooltip:

<img class="class45" src="image.gif" alt="Show this text inside a tooltip!" />

…but these ones not:

<img class="other" src="image.gif" alt="Show this text inside a tooltip!" />

<img src="image.gif" alt="Show this text inside a tooltip!" />

Read how we use the "SOME" option combined with the "Class" option on our own website here:
Use Case: Tooltip content retrieved from "Page", from the "ALT" attribute of "SOME" elements that use a specific "CLASS" value (only)

 

Example 3 for "SOME" elements:

image

All images show a Likno tooltip:

<img src="image1.gif" alt="Show text for image 1 inside a tooltip!" />

<img src="image2.gif" alt="Show text for image 2 inside a tooltip!" />

…but other tags not:

<a href="page.html" title="Show this text inside a tooltip!"> link text here </a>

<div title="Show this text inside a tooltip!"> page text here </div>

Tags: , , , , , , , , , , , , , , , , , , , , ,

 

We are happy to inform you that we have released the latest version of Likno Web Tooltips Builder, version 2.0 build #212.

Check out What's New:

- Enhanced the Content "Attribute" option (now renamed to "In Page").

Screenshot from the interface:

tooltips content in page (title, alt, etc.)

This is a quite powerful option, as you can open the same tooltip with different content that simply exists on each element that opens it ("trigger" element).

You do not have to specify any content inside the application, you just edit your page to add/update/remove your tooltip's content per element. Read the related "Help" topic inside the application for the many options you can use.

- New library loading method (faster/cleaner/more compatible).

- The core library uses the new jQuery v1.7.2 library.

- "Save As" is now enabled for "Examples" also.

- Made some changes to the code so that "Norton" does not give any false positives.

- Fixed an issue with scrollbars (certain cases only).

You can download the latest version at:

http://www.likno.com/jquery-tooltips/download.php

Tags: , , , , , , , , , , , , ,

 


© 2009-2013 Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows