 | 
September 10th, 2008, 10:21 AM
|  | Familiar Sight | | Join Date: Nov 2006
Posts: 227
| |  tooltip alignment
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"> 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
 |
September 10th, 2008, 10:29 AM
|  | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany Age: 31
Posts: 895
| |
you could use the title attribute.... works even with javascript turned off
regards
|
September 10th, 2008, 10:31 AM
| | Familiar Sight | | Join Date: Nov 2006
Posts: 227
| |
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
|
September 10th, 2008, 10:41 AM
| | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany Age: 31
Posts: 895
| |
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
|
September 10th, 2008, 10:43 AM
| | Familiar Sight | | Join Date: Nov 2006
Posts: 227
| |
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
|
September 10th, 2008, 11:34 AM
| | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany Age: 31
Posts: 895
| |
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.
| |
| Thread Tools | Search this Thread | | | |
Posting Rules
| You may not post new threads You may not post replies You may not post attachments You may not edit your posts
HTML code is Off | | |
| | | What is Bytes?
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 205,248 network members.
|
