Tooltip Alignment

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

View Answers

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