Tooltip Alignment

Ads
 

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

Ads









Related Tutorials/Questions & Answers:
Tooltip alignment
alignment of that tooltip as desired.The Div is seen in the other position other than...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
Tooltip Alignment
alignment of that tooltip as desired.The Div is seen in the other position other than...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
Advertisements
alignment
Alignment
Version of com.coderhour>tooltip dependency
List of Version of com.coderhour>tooltip dependency
jsf custom tooltip
jsf custom tooltip  I wants to know that is it possible to add a tooltip to the Custom JSF
ModuleNotFoundError: No module named 'alignment'
ModuleNotFoundError: No module named 'alignment'  Hi, My Python... 'alignment' How to remove the ModuleNotFoundError: No module named 'alignment' error? Thanks   Hi, In your python environment you
ToolTip in IE6 for dropdown
ToolTip in IE6 for dropdown  Hi Can any one tell me how to apply Tool tip in drop down tag in IE6 ?? Thanks
alignment for header and footer
alignment for header and footer  header and footer alignment is not fit like footer is not fit in bottom some white space is there in jsf, what to do
ModuleNotFoundError: No module named 'js.jquery_tooltip'
ModuleNotFoundError: No module named 'js.jquery_tooltip'  Hi, My... named 'js.jquery_tooltip' How to remove the ModuleNotFoundError: No module named 'js.jquery_tooltip' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'pyside-tooltip'
ModuleNotFoundError: No module named 'pyside-tooltip'  Hi, My... named 'pyside-tooltip' How to remove the ModuleNotFoundError: No module named 'pyside-tooltip' error? Thanks   Hi, In your python
how to make a label left alignment?
how to make a label left alignment?  how to make a label left alignment
ModuleNotFoundError: No module named 'face-alignment'
ModuleNotFoundError: No module named 'face-alignment'  Hi, My... named 'face-alignment' How to remove the ModuleNotFoundError: No module named 'face-alignment' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'sciencebeam-alignment'
ModuleNotFoundError: No module named 'sciencebeam-alignment'  Hi...: No module named 'sciencebeam-alignment' How to remove the ModuleNotFoundError: No module named 'sciencebeam-alignment' error? Thanks   Hi
Maven Dependency tooltip >> 1.2
You should include the dependency code given in this page to add Maven Dependency of com.coderhour >> tooltip version1.2 in your project
Maven Dependency tooltip >> 1.3
You should include the dependency code given in this page to add Maven Dependency of com.coderhour >> tooltip version1.3 in your project
ModuleNotFoundError: No module named 'deep-alignment-pytorch'
ModuleNotFoundError: No module named 'deep-alignment-pytorch'  Hi...: No module named 'deep-alignment-pytorch' How to remove the ModuleNotFoundError: No module named 'deep-alignment-pytorch' error? Thanks   Hi
ModuleNotFoundError: No module named 'extract-codon-alignment'
ModuleNotFoundError: No module named 'extract-codon-alignment'  Hi...: No module named 'extract-codon-alignment' How to remove the ModuleNotFoundError: No module named 'extract-codon-alignment' error? Thanks   
ModuleNotFoundError: No module named 'sam-alignment-reconstructor'
ModuleNotFoundError: No module named 'sam-alignment-reconstructor'  ...: No module named 'sam-alignment-reconstructor' How to remove the ModuleNotFoundError: No module named 'sam-alignment-reconstructor' error? Thanks
ToolTip Effect in Flex4
ToolTip Effect in Flex4: In this example you can see how we can use the effect with tooltip. You can provide the effect to the tooltip by using...;; @namespace mx "library://ns.adobe.com/flex/mx"; mx|ToolTip{ font
Alignment of Image in HTML
Alignment of Image in HTML       The Tutorial illustrates an example from Alignment of image in HTML. In this Tutorial, the code explain an alignment of image in HTML
Bar Chart using JSP and tooltip to be implemented
Bar Chart using JSP and tooltip to be implemented  Hi Deepak, I have generated a bar chart in JSP using JFreeCharts but I could not get the tool tip for that. Please any one suggest me how to do that or provide some code. Help
ToolTip with ViewStack in Flex4
ToolTip with ViewStack in Flex4: In this example you can see how we can use the tooltip with ViewStack container. You will use ToolTips on child elements...;; mx|ToolTip{ font-family:Verdana; font-weight:bold; color:#FFFFFF
Make Paragraph and Set Alignment
alignment. To make a paragraph we use Paragraph("Text") constructor . To gives alignment we use setAlignment(int alignment). Code Description: setAlignment(int alignment): We can set
ModuleNotFoundError: No module named 'odoo12-addon-web-tree-image-tooltip'
ModuleNotFoundError: No module named 'odoo12-addon-web-tree-image-tooltip' ...: ModuleNotFoundError: No module named 'odoo12-addon-web-tree-image-tooltip' How to remove...-tooltip' error? Thanks   Hi, In your python environment you have
Working With Alignment Using JSP for Excel
Working with alignment using jsp for excel  ... alignment of cells on an excel sheet. The packages we need to import are java.io..... setAlignment(HSSFCellStyle.ALIGN_CENTER): This method is used to set the alignment
Set Space Ratio and Alignment
alignment. You can make pdf with no space between the characters of a word . Code Description: setAlignment(int alignment... alignment). The alignment can be one of the following values
While retrieving text from database onto JSP, the alignment of line and paragraphs is not followed
While retrieving text from database onto JSP, the alignment of line and paragraphs is not followed  I have stored text database through textarea box. While trying to retrieve the same text from db, the text displayed onto
Using HeaderFooter class of iText API , Can we display multiple phrases in the footer section of PDF ,each with different alignment.
Using HeaderFooter class of iText API , Can we display multiple phrases in the footer section of PDF ,each with different alignment.  Hi, I have a similar question related to HeaderFooter class, I want to display three Phrases
ToolTipManager in FLex4
the tooltip using ToolTipManager. The ToolTipManager provides the basic functionality of tooltip like enabling and disabling tooltip, duration of show and hide tooltip and tooltip effect etc. Example: <?xml version="1.0
Align Text MIDlet Example
want in our application. Similarly we can also set the different alignment... such as right, left, top right and top left etc.. to set the alignment we have

Ads