Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

tooltip alignment

omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 344
#1: Sep 10 '08
hi there i have a link in my pge and on mouseover i want to show the tooltip by getting the coordinates x and y from the screen where the onmouseover event occoured can any one teell me the way to get the right coordinates in
IE and FF my code is not working properly or say it is not a generic code that i could reuse it has the positioning problem so in all my sites where i have to use the tooltip i have to position is manually on that page ....although it gives me correct out put if i make link on a blank page and try to hover it i get the exact position of the tooltip right under my mouse but when i try to embed into my page its all a fussssss and i have to add up some pixels manually to do that and yes i have to swap the x and y coordinates to position the tooltip menas in normal blank page i use
Expand|Select|Wrap|Line Numbers
  1. prevWin.style.top= parseInt(yPos)+'px';
  2. prevWin.style.left= parseInt(xPos)+20+'px';
  3.  
but when i copy paste the same code into my page it starts to display the tooltip on the top and i have to omit the top and assign the xPos to left only
Expand|Select|Wrap|Line Numbers
  1. prevWin.style.left = parseInt(xPos)-300+'px';
  2.  
how stupid can any one help me i am tired of looing on to available tooltip i have to make my own ,here is my code
file:tooltip.js
Expand|Select|Wrap|Line Numbers
  1. var xhr = false;
  2. var xhr = false;
  3. var xPos,yPos;
  4. var xhr;
  5. function showPreview(evt,id,diff){
  6. getPreview(evt,id,diff);
  7.                  return false;
  8.             }
  9.         function hidePreview(){
  10.          document.getElementById("previewWin"). style.visibility = "hidden";
  11.         }
  12.         function hidePreview_m(){
  13.                  document.getElementById("previewWin_m"). style.visibility = "hidden";
  14.             }
  15.         function getPreview(evt,id,diff){
  16.             if (evt){
  17.                 var url = evt.target;
  18.             }
  19.             else{
  20.                 evt = window.event;
  21.                 var url = evt.srcElement;
  22.             }
  23.             alert(evt.srcElement);
  24.             //my added
  25.             if(diff=="mold"){
  26.                 url = "ajax/mold_tip.php?item_name="+id;
  27.             }else{
  28.                 url = "ajax/tooltip_temp.php?item_name="+id;
  29.             }
  30.             //my added
  31.             xPos = evt.clientX;
  32.             yPos = evt.clientY;
  33.             if (window.XMLHttpRequest){
  34.                 xhr = new XMLHttpRequest();
  35.             }
  36.             else {
  37.                 if(window.ActiveXObject){
  38.                    try {
  39.                       xhr = new ActiveXObject ("Microsoft.XMLHTTP");
  40.                    }
  41.                    catch(e){ }
  42.                 }
  43.             }
  44.              if(xhr){
  45.                 if(diff!="mold"){
  46.                     xhr.onreadystatechange = showContents;
  47.                     xhr.open("GET", url, true);
  48.                     xhr.send(null);
  49.                 }else{
  50.                     xhr.onreadystatechange = showmolds;
  51.                     xhr.open("GET", url, true);
  52.                     xhr.send(null);
  53.                 }
  54.              }
  55.              else {
  56.                 alert("Sorry, but I couldn't create an XMLHttpRequest");
  57.              }
  58.         }
  59.         function showmolds(){
  60.              var prevWin = document.getElementById ("previewWin_m");
  61.              hidePreview();
  62.              if(xhr.readyState==4){
  63.                 var innerHtml;
  64.                 var a=(xhr.status==200) ? xhr.responseText : "There was a problem with the request " + xhr.status;
  65.                 innerHtml=a;
  66.                 prevWin.innerHTML=innerHtml;
  67.                 prevWin.style.top='0px';
  68.                 prevWin.style.top= parseInt(yPos)+170+'px';
  69.                 prevWin.style.left= parseInt(xPos)+20+'px';
  70.                 prevWin.style.visibility = "visible";
  71.              }
  72.         }
  73.         function showContents(){
  74.                  var prevWin = document.getElementById ("previewWin");
  75.                  hidePreview_m();
  76.                  if(xhr.readyState==4){
  77.                     var innerHtml;
  78.                     //innerHtml='<div class="floater tip_close" onclick="hidePreview()"></div>';
  79.                     var a=(xhr.status==200) ? xhr.responseText : "There was a problem with the request " + xhr.status;
  80.                     innerHtml=a;
  81.                     prevWin.innerHTML=innerHtml;
  82.                     prevWin.style.top= parseInt(yPos)+170+'px';
  83.                     prevWin.style.left= parseInt(xPos)+20+'px';
  84.                     //prevWin.style.top = parseInt(xPos)+2+'px';
  85.                     //prevWin.style.left = parseInt(xPos)-300+'px';
  86.                     prevWin.style.visibility = "visible";
  87.                     //prevWin.onmouseout = hidePreview;
  88.                  }
  89.             }
  90.  
file:tooltip.css
Expand|Select|Wrap|Line Numbers
  1. #previewWin {
  2.      width:440px;
  3.      height:auto;
  4.      position: absolute;
  5.      visibility: hidden;
  6.      overflow: hidden;
  7.      cursor:pointer;
  8. }
  9. #previewWin_m{
  10.      width:440px;
  11.      height:auto;
  12.      position: absolute;
  13.      visibility: hidden;
  14.      overflow: hidden;
  15.      cursor:pointer;
  16. }
  17.  
file:index.php
Expand|Select|Wrap|Line Numbers
  1. <table cellspacing="0" cellpadding="0" align="center" border="0" width="981">
  2. <tr>
  3.                                                                         <td align="left" valign="middle" colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="detail_bg">
  4.                                                                           <tr>
  5.                                                                             <td><span class="text_white_18_bold">&nbsp;&nbsp;DETAILS:</span><span class="text_white_11"><strong><a href="#." style="cursor:pointer; text-decoration:none;" class="text_white_11" onmouseover="showPreview(event,'<?=$design_info['design_mould'];?>','mold')"><?=$design_info['design_mould']?></a> with 
  6.                                                                             <?
  7.                                                                                     $link_1="";
  8.                                                                                     $link_2="";
  9.                                                                                     $link_3="";
  10.                                                                                     $link_4="";
  11.                                                                                     $first=explode(",",$design_info['design_special_adons']);
  12.                                                                                     $f_a_1=$first[0];
  13.                                                                                     $f_a_2=$first[1];
  14.                                                                                     $f_a_3=$first[2];
  15.                                                                                     $f_a_4=$first[3];
  16.                                                                                     if($f_a_1){
  17.                                                                                         $link_1="<a href=\"#.\" class=\"text_white_11\" onmouseover=\"showPreview(event,'$f_a_1','')\">$f_a_1</a>";
  18.                                                                                     }
  19.                                                                                     if($f_a_2){
  20.                                                                                         $link_2="<a href=\"#.\" class=\"text_white_11\" onmouseover=\"showPreview(event,'$f_a_2','')\">$f_a_2</a>";
  21.                                                                                     }
  22.                                                                                     if($f_a_3){
  23.                                                                                         $link_3="<a href=\"#.\" class=\"text_white_11\" onmouseover=\"showPreview(event,'$f_a_3','')\">$f_a_3</a>";
  24.                                                                                     }
  25.                                                                                     if($f_a_4){
  26.                                                                                         $link_4="<a href=\"#.\" class=\"text_white_11\" onmouseover=\"showPreview(event,'$f_a_4','')\">$f_a_4</a>";
  27.                                                                                     }
  28.                                                                                 ?>
  29.                                                                             <?=$link_1; if($link_2<>""){ echo ", ".$link_2;}?> </strong></span></td>
  30.                                                                           </tr>
  31. </table>
  32. <div id="previewWin"></div>
  33. <div id="previewWin_m"></div>
  34.  
regards omer

Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,660
#2: Sep 10 '08

re: tooltip alignment

you could use the title attribute.... works even with javascript turned off

regards
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 344
#3: Sep 10 '08

re: tooltip alignment

Quote:

Originally Posted by Dormilich

you could use the title attribute.... works even with javascript turned off

regards

ineed to use ajax cause the content loaded is dyanamic could be changed after wards i have to do it this way and how can i postion the div by using title only ????????
regards ,
omer
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,660
#4: Sep 10 '08

re: tooltip alignment

as I understand it, you want a tooltip over a special element (using its id) and there seems to be only a text message...

I still would use title attribute because
- you can dynamically create/remove it (createAttribute())
- it shows whenever (and wherever) the mouse hovers over that element (no need of an event at all)
- you can change the content to your liking

regards
omerbutt's Avatar
Needs Regular Fix
  
Join Date: Nov 2006
Location: Earth Obviously :P
Posts: 344
#5: Sep 10 '08

re: tooltip alignment

Quote:

Originally Posted by Dormilich

as I understand it, you want a tooltip over a special element (using its id) and there seems to be only a text message...

I still would use title attribute because
- you can dynamically create/remove it (createAttribute())
- it shows whenever (and wherever) the mouse hovers over that element (no need of an event at all)
- you can change the content to your liking

regards

can you give an example or alink to any page that can show how tomake that simple tooltip working
regards,
omer
Dormilich's Avatar
Moderator
  
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,660
#6: Sep 10 '08

re: tooltip alignment

ok, a simple sample:
Expand|Select|Wrap|Line Numbers
  1.     var elem = document.getElementById(_element_id_);
  2.     elem.setAttribute("title", _text_from_ajax_);
note: entities inside the text are not rendered, but since javascript uses unicode natively, you can convert them before returning the request to the javascript.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,471 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved