Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Getting tooltip content from an external source

    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?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by dazza30 View Post
    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.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Isnt it possible to get some constructive advice from anyone other than a straight no to my question lol
    Last edited by dazza30; 02-03-2009 at 11:12 PM.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    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.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

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

  • #7
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    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:

    Code:
    <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:
    Code:
    <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:
    Code:
    //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:
    Code:
    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!
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #8
    New Coder
    Join Date
    Oct 2007
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •