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: , , , , , , , , , , , , , , , , , , , , ,

 

Knowledge Base support case for Likno Web Modal Windows Builder, abstracted and stripped of all user’s private info.


Initial Email From:
Stanley
Initial Email Subject: Help for Likno Web Modal Windows Builder
Support Case Month: March 2012

Dear Support,

I like the Modal Windows to display external web page with auto resize (this is the page to display: http://www.pcmaster.com.sg/CardScan_feature.html) when user click on the word something like "Click for product comparison".

Please advise me how to do it.

Thank you in advance for helping this.

Regards,

Stanley


Reply From:
Likno Customer Support

Dear Stanley,

I am afraid that the “auto” size does not work for external pages. Other than that, you can open the external page using the following values:

clip_image002

To call the modal from a specific link you need to add the modal name like so:

<a href="javascript:void(0)" target="Modal_Window_1">Click for product comparison</a>

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider) or design for your websites!


Reply From:
Stanley

Dear Support,

Is there any way to pass the parameter (link and modal size) to modal windows if I use the same window modal for different link (Single sheet) instead of creating each modal for each external link. As for modal size, though it can be set to percentage but it does not work in IE for height in %.

Something like lytebox:

<a href="cardScan_feature.html" class="lytebox" data-lyte-options="width:96% height:100%">Click</a> for product comparison.

<a href="office2010.html" class="lytebox" data-lyte-options="width:96% height:100%">Click</a>for Office 2010 comparison.

Regards,

Stanley


Reply From:
Likno Customer Support

Dear Stanley,

You can do this too, but this can only be done using the API. In this case, it would be best to create a separate JavaScript function that accepts these parameters and opens the appropriate modal window.

Here is an example of how this would work:

function openModal(url, w, h) {
    Modal_Window_1({bodySource:"<div externalUrl='"+url+"'/>",containerCss:{width:w, height:h});
}

Then this is an example of two links:

<a href="javascript:void(0)" onclick="openModal('compare1.html',500,400);">Click for product1 comparison</a>

<a href="javascript:void(0)" onclick="openModal('compare2.html',400,300);">Click for product2 comparison</a>

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider) or design for your websites!


Reply From:
Stanley

Dear Support,

Can you take a look at this link at my testing site : {LINK REMOVED}, somewhere at the bottom of the "Description" you can see "Click here to see product features and comparison".

I use this statement to call external link: 

<a href="#" target="cardScan">Click hear to see product features and comparison.

Would you please teach me how to apply your method to this modal window.

Regards,

Stanley


Reply From:
Likno Customer Support

Dear Stanley,

The logic is the same as the one I described in my previous email. If you want this link to also control which page will open and the width of the window, you need to first add the following code in the <head></head> of your page:

<script>

function openModal(url, w, h) {
    cardScan({bodySource:"<div externalUrl='"+url+"'/>",containerCss:{width:w, height:h}});
}

</script>

Then you need to change your link to the following:

<a href="havascript:void(0);" onclick="openModal('/CardScan_feature.html',800,400);">Click Here</a>

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider) or design for your websites!


Reply From:
Stanley

Dear Support,

May I know is there any way to put % for width and height? (the reason why I like to switch from lytebox to model window is because of % for width and height in lytebox has compatibility issue with IE)

Regards,

Stanley 


Reply From:
Likno Customer Support

Hello,

Yes, on the link values, use something like this:

<a href="havascript:void(0);" onclick="openModal('/CardScan_feature.html','50%','40%');">Click Here</a>

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider) or design for your websites!


Reply From:
Stanley

Dear Support,

1) I've tried that but did not work (passing width and height in %)

2) How to pass the title to each model window? (it has the same title for each model)

Regards,

Stanley


Reply From:
Likno Customer Support

Hello,

I just tried it in your online page, and the size worked fine…

If you want to also change the title, then you need to add this too in the function..

The link should be:

openModal('/CardScan_feature.html','80%','40%','the title');

and the function:

function openModal(url, w, h, t) {
        cardScan({bodySource:"<div externalUrl='"+url+"'/>",containerCss:{width:w, height:h},header:{text:t}});
}

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider) or design for your websites!

Tags: , , , ,

 

How to add a tooltip in a web page using the "TITLE" attribute, applied to an "IMG" tag.

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

 


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