tooltip alignment

[omerbutt]

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

prevWin.style.top= parseInt(yPos)+'px';
prevWin.style.left= parseInt(xPos)+20+'px';
 

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

prevWin.style.left = parseInt(xPos)-300+'px';
 

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

var xhr = false;
var xhr = false;
var xPos,yPos;
var xhr;
function showPreview(evt,id,diff){
getPreview(evt,id,diff);
                 return false;
            }
        function hidePreview(){
         document.getElementById("previewWin"). style.visibility = "hidden";
        }
        function hidePreview_m(){
                 document.getElementById("previewWin_m"). style.visibility = "hidden";
            }
        function getPreview(evt,id,diff){
            if (evt){
                var url = evt.target;
            }
            else{
                evt = window.event;
                var url = evt.srcElement;
            }
            alert(evt.srcElement);
            //my added
            if(diff=="mold"){
                url = "ajax/mold_tip.php?item_name="+id;
            }else{
                url = "ajax/tooltip_temp.php?item_name="+id;
            }
            //my added
            xPos = evt.clientX;
            yPos = evt.clientY;
            if (window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }
            else {
                if(window.ActiveXObject){
                   try {
                      xhr = new ActiveXObject ("Microsoft.XMLHTTP");
                   }
                   catch(e){ }
                }
            }
             if(xhr){
                if(diff!="mold"){
                    xhr.onreadystatechange = showContents;
                    xhr.open("GET", url, true);
                    xhr.send(null);
                }else{
                    xhr.onreadystatechange = showmolds;
                    xhr.open("GET", url, true);
                    xhr.send(null);
                }
             }
             else {
                alert("Sorry, but I couldn't create an XMLHttpRequest");
             }
        }
        function showmolds(){
             var prevWin = document.getElementById ("previewWin_m");
             hidePreview();
             if(xhr.readyState==4){
                var innerHtml;
                var a=(xhr.status==200) ? xhr.responseText : "There was a problem with the request " + xhr.status;
                innerHtml=a;
                prevWin.innerHTML=innerHtml;
                prevWin.style.top='0px';
                prevWin.style.top= parseInt(yPos)+170+'px';
                prevWin.style.left= parseInt(xPos)+20+'px';
                prevWin.style.visibility = "visible";
             }
        }
        function showContents(){
                 var prevWin = document.getElementById ("previewWin");
                 hidePreview_m();
                 if(xhr.readyState==4){
                    var innerHtml;
                    //innerHtml='<div class="floater tip_close" onclick="hidePreview()"></div>';
                    var a=(xhr.status==200) ? xhr.responseText : "There was a problem with the request " + xhr.status;
                    innerHtml=a;
                    prevWin.innerHTML=innerHtml;
                    prevWin.style.top= parseInt(yPos)+170+'px';
                    prevWin.style.left= parseInt(xPos)+20+'px';
                    //prevWin.style.top = parseInt(xPos)+2+'px';
                    //prevWin.style.left = parseInt(xPos)-300+'px';
                    prevWin.style.visibility = "visible";
                    //prevWin.onmouseout = hidePreview;
                 }
            }
 

file:tooltip.css

#previewWin {
     width:440px;
     height:auto;
     position: absolute;
     visibility: hidden;
     overflow: hidden;
     cursor:pointer;
}
#previewWin_m{
     width:440px;
     height:auto;
     position: absolute;
     visibility: hidden;
     overflow: hidden;
     cursor:pointer;
}
 

file:index.php

<table cellspacing="0" cellpadding="0" align="center" border="0" width="981">
<tr>
                                                                        <td align="left" valign="middle" colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="detail_bg">
                                                                          <tr>
                                                                            <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 
                                                                            <?
                                                                                    $link_1="";
                                                                                    $link_2="";
                                                                                    $link_3="";
                                                                                    $link_4="";
                                                                                    $first=explode(",",$design_info['design_special_adons']);
                                                                                    $f_a_1=$first[0];
                                                                                    $f_a_2=$first[1];
                                                                                    $f_a_3=$first[2];
                                                                                    $f_a_4=$first[3];
                                                                                    if($f_a_1){
                                                                                        $link_1="<a href=\"#.\" class=\"text_white_11\" onmouseover=\"showPreview(event,'$f_a_1','')\">$f_a_1</a>";
                                                                                    }
                                                                                    if($f_a_2){
                                                                                        $link_2="<a href=\"#.\" class=\"text_white_11\" onmouseover=\"showPreview(event,'$f_a_2','')\">$f_a_2</a>";
                                                                                    }
                                                                                    if($f_a_3){
                                                                                        $link_3="<a href=\"#.\" class=\"text_white_11\" onmouseover=\"showPreview(event,'$f_a_3','')\">$f_a_3</a>";
                                                                                    }
                                                                                    if($f_a_4){
                                                                                        $link_4="<a href=\"#.\" class=\"text_white_11\" onmouseover=\"showPreview(event,'$f_a_4','')\">$f_a_4</a>";
                                                                                    }
                                                                                ?>
                                                                            <?=$link_1; if($link_2<>""){ echo ", ".$link_2;}?> </strong></span></td>
                                                                          </tr>
</table>
<div id="previewWin"></div>
<div id="previewWin_m"></div>
 

regards omer

[Dormilich]

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

regards

[omerbutt]

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]

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]

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]

ok, a simple sample:

    var elem = document.getElementById(_element_id_);
    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.