...

View Full Version : Getting tooltip content from an external source



dazza30
02-02-2009, 11:57 PM
Hi to everyone

Ive been using a javascript tooltip script in its extended configuration which allows you to convert a html element to a tooltip i found it here http://www.walterzorn.com/tooltip/tooltip_e.htm Ive have the tooltip setup on this page
pre-pay-as-you-go.co.uk/vodafone-mobile-phones.html , if you move the mouse over the details link below each handset the tooltip pops up, these tooltips are coded into the page.

If you go to the home page you will see the first three handsets are the same as the ones on the first page i showed you but without the tooltip included, this is due to page size constraints, is there a way of fetching or whatever it’s called the tooltip content from the first page to display on the home page?

Philip M
02-03-2009, 10:21 AM
Hi to everyone
... this is due to page size constraints, is there a way of fetching or whatever it’s called the tooltip content from the first page to display on the home page?

The answer is no, IMO.
Are you using some free hosting service with page size restrictions? If so the solution is obvious.


Following protracted negotiations we have come to an arrangement with the banks under which we have agreed not to supply goods to our customers on credit. For their part the banks have agreed not to sell ladies' clothing.

dazza30
02-03-2009, 11:34 AM
No im not using a free hosting service, i just set my self a challenge to try and keep page size below 40k for the homepage of the site im working on.

If the answer is no to my question, can you point me in the direction of something that can retreive content from an external source i could use with a tooltip script?

dazza30
02-04-2009, 12:07 AM
Isnt it possible to get some constructive advice from anyone :( other than a straight no to my question lol

rnd me
02-04-2009, 12:54 AM
yes, see section 8 of the walter zorn script.

you can define all the tooltips in an external .js file that all your pages point to.

dazza30
02-04-2009, 01:14 AM
Hi rnd me

I need any external tooltip to contain an html element, which when coded inline looks like this below.

If i was to place the below xhtml/javascript into an external js file would the element display correctly? Im completely out of my depth here.


<div><a onmouseover="TagToTip('t1', TITLE, 'Sony Ericsson W350i details', WIDTH, 300, SHADOW, true, STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true, CENTERWINDOW, true, CENTERALWAYS, true)" onmouseout="UnTip()"class="pd2">DETAILS</a>
</div><div id="t1"><p><img alt="Sony Ericsson W350i on Vodafone pay as you go" src="images/K770ipurple.gif" class="fl"/>Tiny frame, mighty sound, this is one of the sleekest looking Walkman® pay as you go mobile phones. You don't even have to open the Sony Ericsson W350i to play your music, dedicated music controls take care of that.</p>
<ul style="margin-right:10px">
<li>1.3 Megapixel camera with 4X digital zoom</li>
<li>Mp3 player, Media player</li>
<li>Polyphonic and Mp3 tones</li>
<li>Gprs, Wap, Bluetooth, Usb</li>
<li>Memory Stick Pro card slot</li>
<li>Internal memory 14mb</li>
<li>Talk time upto 420 minutes</li>
<li>Internat browser, Email</li>
<li>Speaker phone, Vibrate alert</li>
</ul></div>


Ive looked at this part of the script and so far its not clear to me.

Heres a copy of section 8

Instead of a string enclosed with single quotes, Tip() accepts as well a variable or a call to a function defined elsewhere, for instance in a <script> block or in a separate JS file. The same is true for commands passed to Tip() or TagToTip() (listing and description of commands see below). Thus, each time a tooltip is about to be displayed, its content and formatting could be established dynamically.
Example:


<html>
<head>
...
<script type="text/javascript">
var txt1 = "This is the text of the first tooltip";

function TooltipTxt(n)
{
return "This is the text of the " + n + " tooltip";
}
</script>
</head>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
...
<a href="a.htm" onmouseover="Tip(txt1)" onmouseout="UnTip()">Link 1</a>
...
<a href="b.htm" onmouseover="Tip(TooltipTxt('second'))" onmouseout="UnTip()">Link 2</a>
...
<a href="c.htm" onmouseover="Tip(TooltipTxt('third'))" onmouseout="UnTip()">Link 3</a>
...
</body>
</html>

rnd me
02-04-2009, 02:46 AM
yes, you can package html in a .js file.



it can be a little tricky however, mainly because normal html will not work.

i don't think any editors have a built in encoding routine, so you'll have to convert the html into a format that is safe to place in a .js file.



but supposing you can do that, here is an example external .js that you can point to in all your pages.

instead of writing the tooltip into the html, simply give the <a> tag an id.
then add the html into the TIPS object, just like the other ones.

when the page loads, it will add the tooltip effect to each element you define (using the id), and add the labeled string as the tooltip.

your new html tag would be a lot cleaner:


<a class="pd2" onmouseout="UnTip()" onmouseover="TagToTip('t1', TITLE, 'Sony Ericsson W350i details', WIDTH, 300, SHADOW, true, STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true, CENTERWINDOW, true, CENTERALWAYS, true)">DETAILS</a>

becomes:


<a class="pd2" id="sew350i">DETAILS</a>


feel free to rename the ids, just be consistent and don't start with numbers, or use non-letters.


external file contents:


//customize this part with new element IDs and tooltips:

TIPS={

smj700: [ "Samsung J700 details" ,
"<p><img alt=\"Samsung j700 on Vodafone pay as you go\" src=\"images/j700voda.gif\" class=\"fl\">The Samsung J700 Black pay as you go mobile phone packs an easy to use camera and powerful music player into its super stylish frame. It's clever too, synchronizing with Outlook on your PC it keeps your life totally organised.</p>\n<ul style=\"margin-right: 10px;\">\n<li>1.3 Megapixel camera with 4X digital zoom</li>\n<li>Mp3 player</li>\n<li>Polyphonic and Mp3 ringtones</li>\n<li>Gprs, Bluetooth</li>\n<li>MicroSD memory card slot</li>\n<li>Internal memory 10mb</li>\n<li>Talk time upto 250 minutes</li>\n<li>Mobile internet</li>\n<li>Stereo FM radio</li>\n<li>Games/Preloaded java applications</li>\n</ul>" ] ,

sew350i: [ "Sony Ericsson W350i details" ,
"<p><img alt=\"Sony Ericsson W350i on Vodafone pay as you go\" src=\"images/w350in.gif\" class=\"fl\">Tiny frame, mighty sound, this is one of the sleekest looking Walkman® pay as you go mobile phones. You don\'t even have to open the Sony Ericsson W350i to play your music, dedicated music controls take care of that.</p>\n<ul style=\"margin-right: 10px;\">\n<li>1.3 Megapixel camera with 4X digital zoom</li>\n<li>Mp3 player, Media player</li>\n<li>Polyphonic and Mp3 tones</li>\n<li>Gprs, Wap, Bluetooth, Usb</li>\n<li>Memory Stick Pro card slot</li>\n<li>Internal memory 14mb</li>\n<li>Talk time upto 420 minutes</li>\n<li>Internat browser, Email</li>\n<li>Speaker phone, Vibrate alert</li>\n</ul>" ]






} // end of tooltip definitions. (element id to left of ":", tooltip text as a string to the right)

// # # # Leave code below intact! # #

(function(){ // bind all tool tips to elements by id

addEvent(window, "onload", function(){

for (var id in TIPS) {if (TIPS.hasOwnProperty(id)){
var elm = el(id);
if(!elm){continue;}
elm.onmouseover=function(){
Tip( TIPS[id][1] , TITLE, TIPS[id][0] , WIDTH, 300, SHADOW, true,
STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true, CENTERWINDOW,
true, CENTERALWAYS, true) ;
}

elm.onmouseout=function(){ UnTip(); }
}}

});//end onload function

function addEvent( obj, type, fn ) {
var ename= type.replace(/^on/i,"");
var resp = obj.attachEvent ?
obj.attachEvent( "on" + ename, function(){ return fn.call(obj, window.event )} ) :
obj.addEventListener(ename, fn, false );
if(!resp){ obj["on"+ename] = fn; }
}

function el(tid){if(tid.nodeName){return tid;}return el._ts[tid]||(el._ts[tid]=document.getElementById(tid));};el._ts={};

}()); //end tooltip binder



so all you will need to do is add the strings into the code and save it as a .js.



how do you encode the html into strings?

it tricky.

here's what i did in firefox:

1. goto http://danml.com/pub/strings5.html

2. click on the "X" tab on the far left.



3. paste your html into the gray box. (it should faintly say "[x]" in the background)

4. clear the code box text (yellow font). it should contain only this text:

y.value=x.quoted();

5. click the "run" button, then click the "Y" tab.

6. copy the encoded html and add it into the script.

repeat steps 2,3,5 and 6 as needed to make more tooltips.


pay particular attention when adding new tool tips to make sure that there is a comma between each entry. there should not be one after the last entry.

let me know how things work out.

cheers!

dazza30
02-04-2009, 11:23 AM
Hi rnd me

Thanks alot for the detailed response, at first look it seems complicated but ill read it a few times more and give it ago at some point today.

Ill let you know how i get on.

Thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum