JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Mouse Over ToolTip Help

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Nov 2004
Posts: 2
Reputation: ukndoit is an unknown quantity at this point 
Solved Threads: 0
ukndoit ukndoit is offline Offline
Newbie Poster

Mouse Over ToolTip Help

 
0
  #1
Nov 20th, 2004
I have a javascript that I have been using for a long while now, and I have the need now to make it work differently.

I have it where when the mouse goes over a link it will give you a 'tip' as to what that link is for, or whatever I put in the 'mouseover'.

Here is the javascript 'code':

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <DIV ID="toolTipLayer" STYLE="position:absolute; visibility:hidden;"></DIV>
  2. <script language="JavaScript">
  3. var ns4 = document.layers;
  4. var ns6 = document.getElementById && !document.all;
  5. var ie4 = document.all;
  6. var offsetX = 0;
  7. var offsetY = 20;
  8. var toolTipSTYLE="";
  9. var CAPTION='cap';
  10. var FG='fg';
  11. var BG='bg';
  12. var TEXTCOLOR='tc';
  13. var CAPTIONCOLOR='cc';
  14. var WIDTH='tw';
  15. var HEIGHT='th';
  16. var FONT='font';
  17. var POSITIONY='posy';
  18. var cap, fg, bg, tc, cc, tw, th, font, posy = 0;
  19. function initToolTips() {
  20. if(ns4||ns6||ie4) {
  21. if(ns4) toolTipSTYLE = document.toolTipLayer;
  22. else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
  23. else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
  24. if(ns4) document.captureEvents(Event.MOUSEMOVE);
  25. else {
  26. toolTipSTYLE.visibility = "visible";
  27. toolTipSTYLE.display = "none";
  28. }
  29. document.onmousemove = moveToMouseLoc;
  30. }
  31. }
  32. function toolTip() {
  33. if(arguments.length < 1) { // hide
  34. if(ns4) toolTipSTYLE.visibility = "hidden";
  35. else toolTipSTYLE.display = "none";
  36. } else { // show
  37. var msg = arguments[0];
  38. fg = "#666666";
  39. bg = "#EAEAFF";
  40. 	tc = "#000000";
  41. 	cc= "#FFFFFF";
  42. 	font = "Verdana,Arial,Helvetica";
  43. 	tw = '';
  44. 	th = '';
  45. 	cap = '';
  46. 	posy = 0;
  47. for(var i = 1; i < arguments.length; i+=2) {
  48. 	switch (arguments[i]) {
  49. 	case "cap": cap = arguments[i+1]; break;
  50. 		case "font": font = arguments[i+1]; break;
  51. 		case "fg": fg = arguments[i+1]; break;
  52. 		case "bg": bg = arguments[i+1]; break;
  53. 		case "tc": tc = arguments[i+1]; break;
  54. 		case "cc": cc = arguments[i+1]; break;
  55. 		case "tw": tw = arguments[i+1]; break;
  56. 		case "th": th = arguments[i+1]; break;
  57. 		case "posy": posy = arguments[i+1]; break;
  58. 	}
  59. 	}
  60. var content =
  61. 	'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" width="' + tw + '" height="' + th + '"><td>' +
  62. 	'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg + '" width="' + tw + '" height="' + th + '">';
  63. 	if(cap) content += '<tr><td bgcolor=' + fg + '><font face="' + font + '" color="' + cc + '" size="-2"><b>' + cap + '</b></font></td></tr><tr>';
  64. 	content += '<td><font face="' + font + '" color="' + tc + '" size="-2">' + msg + '</font></td>';
  65. 	if(cap) content += '</tr>';
  66. 	content += '</table></td></table>';
  67. if(ns4) {
  68. toolTipSTYLE.document.write(content);
  69. toolTipSTYLE.document.close();
  70. toolTipSTYLE.visibility = "visible";
  71. }
  72. else if(ns6) {
  73. moveToMouseLoc(document);
  74. document.getElementById("toolTipLayer").innerHTML = content;
  75. toolTipSTYLE.display='block';
  76. }
  77. else if(ie4) {
  78. moveToMouseLoc();
  79. document.all("toolTipLayer").innerHTML=content;
  80. toolTipSTYLE.display='block';
  81. }
  82. }
  83. }
  84. function moveToMouseLoc(e) {
  85. if(ns4||ns6) {
  86. x = e.pageX;
  87. y = e.pageY;
  88. 	if (tw && (x + offsetX + Number(tw) + 10 > window.innerWidth)) x = window.innerWidth - offsetX - Number(tw) - 10;
  89. } else {
  90. x = event.x + document.body.scrollLeft;
  91. y = event.y + document.body.scrollTop;
  92. 	if (tw && (x + offsetX + Number(tw) + 30 > document.body.offsetWidth)) x = document.body.offsetWidth - offsetX - Number(tw) - 30;
  93. }
  94. toolTipSTYLE.left = x + offsetX;
  95. toolTipSTYLE.top = y + offsetY + Number(posy);
  96. return true;
  97. }
  98. initToolTips();
  99. </script>

Now what I am wanting to do, is when the mouseover displays the "table's" with the 'tips' if the 'content' is having mutilple lines which I have tried using a blank line
and also a \n but neither work. If I use a blank line the whole code just breaks. If I just use a \n that is now shown in the code but the table still looks like this:

some content here [8] should start new line
[90] and now another line should[1] start but
it just continues[4]

Sort of like that.
Is there a way to make it where \n will actually start a new line in the 'content' of the new table it hovers?

I even had it send the 'content' like this:

' + 'some content here [8]' + '\n\n' + 'should start new line [90]' + '\n\n' + 'and now another line should[1]' + '\n\n' + 'start but it just continues[4]

I do that because when it sends that it insert's it into this: tooltip('');
That way the first ' will be ''+ and the last will be ');
No javascript errors, but still it shows them like I said above, without the line breaks.

I would appreciate any 'tips' on how to make it do what I need it to.

Thank you,
Richard
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2004
Posts: 9
Reputation: js-x.com is an unknown quantity at this point 
Solved Threads: 0
js-x.com js-x.com is offline Offline
Newbie Poster

Re: Mouse Over ToolTip Help

 
0
  #2
Nov 24th, 2004
You could try escaping the "\" in the pair "\n" to be "\\n".

This might delay the evaluation of the newline until you want it evaluted.

I know there is a tool-tip DHTML popup box example on this javascript site.
But it is also used on this page http://jsx/consult/p/2004_calendar/

1000s of Free Javascripts
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 1
Reputation: saidyakhyoev is an unknown quantity at this point 
Solved Threads: 0
saidyakhyoev saidyakhyoev is offline Offline
Newbie Poster

Re: Mouse Over ToolTip Help

 
0
  #3
Dec 14th, 2007
•
•
•
•
Originally Posted by ukndoit View Post
I have a javascript that I have been using for a long while now, and I have the need now to make it work differently.

I have it where when the mouse goes over a link it will give you a 'tip' as to what that link is for, or whatever I put in the 'mouseover'.

Here is the javascript 'code':

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <DIV ID="toolTipLayer" STYLE="position:absolute; visibility:hidden;"></DIV>
  2. <script language="JavaScript">
  3. var ns4 = document.layers;
  4. var ns6 = document.getElementById && !document.all;
  5. var ie4 = document.all;
  6. var offsetX = 0;
  7. var offsetY = 20;
  8. var toolTipSTYLE="";
  9. var CAPTION='cap';
  10. var FG='fg';
  11. var BG='bg';
  12. var TEXTCOLOR='tc';
  13. var CAPTIONCOLOR='cc';
  14. var WIDTH='tw';
  15. var HEIGHT='th';
  16. var FONT='font';
  17. var POSITIONY='posy';
  18. var cap, fg, bg, tc, cc, tw, th, font, posy = 0;
  19. function initToolTips() {
  20. if(ns4||ns6||ie4) {
  21. if(ns4) toolTipSTYLE = document.toolTipLayer;
  22. else if(ns6) toolTipSTYLE = document.getElementById("toolTipLayer").style;
  23. else if(ie4) toolTipSTYLE = document.all.toolTipLayer.style;
  24. if(ns4) document.captureEvents(Event.MOUSEMOVE);
  25. else {
  26. toolTipSTYLE.visibility = "visible";
  27. toolTipSTYLE.display = "none";
  28. }
  29. document.onmousemove = moveToMouseLoc;
  30. }
  31. }
  32. function toolTip() {
  33. if(arguments.length < 1) { // hide
  34. if(ns4) toolTipSTYLE.visibility = "hidden";
  35. else toolTipSTYLE.display = "none";
  36. } else { // show
  37. var msg = arguments[0];
  38. fg = "#666666";
  39. bg = "#EAEAFF";
  40. 	tc = "#000000";
  41. 	cc= "#FFFFFF";
  42. 	font = "Verdana,Arial,Helvetica";
  43. 	tw = '';
  44. 	th = '';
  45. 	cap = '';
  46. 	posy = 0;
  47. for(var i = 1; i < arguments.length; i+=2) {
  48. 	switch (arguments[i]) {
  49. 	case "cap": cap = arguments[i+1]; break;
  50. 		case "font": font = arguments[i+1]; break;
  51. 		case "fg": fg = arguments[i+1]; break;
  52. 		case "bg": bg = arguments[i+1]; break;
  53. 		case "tc": tc = arguments[i+1]; break;
  54. 		case "cc": cc = arguments[i+1]; break;
  55. 		case "tw": tw = arguments[i+1]; break;
  56. 		case "th": th = arguments[i+1]; break;
  57. 		case "posy": posy = arguments[i+1]; break;
  58. 	}
  59. 	}
  60. var content =
  61. 	'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + fg + '" width="' + tw + '" height="' + th + '"><td>' +
  62. 	'<table border="0" cellspacing="0" cellpadding="1" bgcolor="' + bg + '" width="' + tw + '" height="' + th + '">';
  63. 	if(cap) content += '<tr><td bgcolor=' + fg + '><font face="' + font + '" color="' + cc + '" size="-2"><b>' + cap + '</b></font></td></tr><tr>';
  64. 	content += '<td><font face="' + font + '" color="' + tc + '" size="-2">' + msg + '</font></td>';
  65. 	if(cap) content += '</tr>';
  66. 	content += '</table></td></table>';
  67. if(ns4) {
  68. toolTipSTYLE.document.write(content);
  69. toolTipSTYLE.document.close();
  70. toolTipSTYLE.visibility = "visible";
  71. }
  72. else if(ns6) {
  73. moveToMouseLoc(document);
  74. document.getElementById("toolTipLayer").innerHTML = content;
  75. toolTipSTYLE.display='block';
  76. }
  77. else if(ie4) {
  78. moveToMouseLoc();
  79. document.all("toolTipLayer").innerHTML=content;
  80. toolTipSTYLE.display='block';
  81. }
  82. }
  83. }
  84. function moveToMouseLoc(e) {
  85. if(ns4||ns6) {
  86. x = e.pageX;
  87. y = e.pageY;
  88. 	if (tw && (x + offsetX + Number(tw) + 10 > window.innerWidth)) x = window.innerWidth - offsetX - Number(tw) - 10;
  89. } else {
  90. x = event.x + document.body.scrollLeft;
  91. y = event.y + document.body.scrollTop;
  92. 	if (tw && (x + offsetX + Number(tw) + 30 > document.body.offsetWidth)) x = document.body.offsetWidth - offsetX - Number(tw) - 30;
  93. }
  94. toolTipSTYLE.left = x + offsetX;
  95. toolTipSTYLE.top = y + offsetY + Number(posy);
  96. return true;
  97. }
  98. initToolTips();
  99. </script>

Now what I am wanting to do, is when the mouseover displays the "table's" with the 'tips' if the 'content' is having mutilple lines which I have tried using a blank line
and also a \n but neither work. If I use a blank line the whole code just breaks. If I just use a \n that is now shown in the code but the table still looks like this:

some content here [8] should start new line
[90] and now another line should[1] start but
it just continues[4]

Sort of like that.
Is there a way to make it where \n will actually start a new line in the 'content' of the new table it hovers?

I even had it send the 'content' like this:

' + 'some content here [8]' + '\n\n' + 'should start new line [90]' + '\n\n' + 'and now another line should[1]' + '\n\n' + 'start but it just continues[4]

I do that because when it sends that it insert's it into this: tooltip('');
That way the first ' will be ''+ and the last will be ');
No javascript errors, but still it shows them like I said above, without the line breaks.

I would appreciate any 'tips' on how to make it do what I need it to.

Thank you,
Richard
Richard,
Try using <br>, instead of /n. msg can be text or html, if i am not mistaken.
i have the same code, i took it from the dreamweaver snippet. I sent toolTip('<i>Said</i>'); and had Said..
hope it helps

-Said
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser bug calendar captchaformproblem cart checkbox close codes column createrange() css cursor date debugger decimal dependent design dom download dropdown element embed enter error events firefox focus form frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 iframe images index internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsfile jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 onmouseover paypal php player position post problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c website window windowofwords windowsxp
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC