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:
| <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:
| <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:
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:
Example 1 for "SOME" elements:
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:
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:
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>
