debasis
Dear Sir,
I have a code given below,which gived tooltip design.But,in one table i am getting three students' information.On putting the mouse on the roll numbers of the students i can not get the right alignment of that tooltip as desired.The Div is seen in the other position other than near the student's roll number.My code to show the tooltip is given below.
function show(item,name,address,age,gender,pon,transerial){ hp = document.getElementById("div"); hp.innerHTML = "Rating No.: "+name+" Manufacturer: "+address+" Year Of manufacture: "+age+" Cost Of DTR: "+gender+" Purchase Order No.: "+pon+" Manufacturer Serial No.:"+transerial; hp.style.botom = item.offsetBottom + 100; hp.style.left = item.offsetLeft + 20; hp.style.visibility = "Visible"; } function hide(){ hp = document.getElementById("div"); hp.style.visibility = "Hidden"; }
This is the HTML.
RATING",kvaTemp) %>','<%= sentStore.returnName("TMSMANUFACTURER",manufacturer) %>','<%=yearOfManu%>','<%=costOfDtr%>','<%=purchaseOrderNo%>','<%=transforSerialNo%>');" onMouseOut="hide();"><%= dtrNo %>
Please help me how to see the tooltip in the right place near to the that concerned student.
regards Deb
March 30, 2011 at 11:17 AM
1)main.js:
this.tooltip = function(){
xOffset = 10;
yOffset = 20;
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
$(document).ready(function(){
tooltip();
});
2)tooltip.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Tooltip</title>
<script src="../plugin/jquery.js" type="text/javascript"></script>
<script src="../plugin/main.js" type="text/javascript"></script>
</meta>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
a{
text-decoration:none;
color:#f30;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
</style>
</head>
<body>
<table>
<tr>
<td>Student Id</td>
<td>Student Nane</td>
<td>Age</td>
<td>Gender</td>
</tr>
<tr>
<td>1</td>
<td><a href="#" class="tooltip" title="Student1">Student1</a></td>
<td>24</td>
<td>M</td>
</tr>
<tr>
<td>2</td>
<td><a href="#" class="tooltip" title="Student2">Student2</a></td>
<td>25</td>
<td>F</td>
</tr>
<tr>
<td>3</td>
<td><a href="#" class="tooltip" title="Student3">Student3</a></td>
<td>30</td>
<td>M</td>
</tr>
<tr>
<td>4</td>
<td><a href="#" class="tooltip" title="Student4">Student4</a></td>
<td>20</td>
<td>F</td>
</tr>
</table>
</body>
</html>
March 30, 2011 at 11:20 AM
3)jquery.js
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
