Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Answers Viewqa Ajax Tooltip Alignment
Login         

View Questions and Answers by Category

Advertisements


 
Have Programming Question? Ask it here!
 
 
 


debasis
Tooltip Alignment
2 Answer(s)      3 years and 9 months ago
Posted in : Ajax


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


Advertisement
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



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 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
ToolTip in Flex4
ToolTip in Flex4: ToolTip is used for display the message. When user moves a mouse towards a component a message will appear it is a ToolTip and user clicks the mouse button the message disappears. You can set the one ToolTip
Tooltip problem - JSP-Servlet
Tooltip problem  In my project i used google map...I want show tooltip on marker when marker created not on marker event like mouseover,click
jsf custom tooltip
jsf custom tooltip  I wants to know that is it possible to add a tooltip to the Custom JSF
how to make a label left alignment?
how to make a label left alignment?  how to make a label left alignment
Alignment in struts 2.0 - Struts
Alignment in struts 2.0  Hi, I am working in Struts 2.0. I have 2 queries. 1) I have used tr and td but i am not able to align in center. 2)label and textfield are not coming in same line. indentation is not proper
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
tooltip problem - Swing AWT
tooltip problem  Hi All, I am using SWT_AWT bridge in my code... Composite. My problem is that I am unable to see the tooltip for this button even...[]) { JFrame frame = new JFrame("Tooltip
Alignment in the Dojo Date Widget - Ajax
Alignment in the Dojo Date Widget  Is there any way to align misaligned text in a dojo date widget?   Hi Friend, Please visit the following links: http://www.roseindia.net/dojo/ http://www.roseindia.net/dojo/dojo
Flex ToolTip with TabBar and ToolTipManager
about ToolTip with TabBar controls. You can see how to use tooltip in TabBar controls. TabBar class support ToolTip their data providers. In the following example...(source='assets/flower.jpeg')" toolTip="It is a beautiful
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
jQuery tooltip
What is tooltip ? A tooltip is help box or text that appears when you rollover... attribute of an image tag will be displayed as a tooltip by a browser when you rollover... to every image and hyperlink. Getting Started with jquery tooltip: In this example
Flex ToolTip Style and StyleManager
Set ToolTip Style In Flex:- We discuss about how to set 'Style' for the tooltip in Flex with the help of <mx:Style> Tag. In this tutorial you... of the tooltip. we can set 'fontSize', 'fontFamily', 'fontStyle
Flex Simple ToolTip
Flex ToolTip:- The Flex ToolTip are a mechanism (method) to give the useful information to the user. Flex ToolTip are display information when a user moves... , ToolTip are appear and after click that particular component, ToolTip
ToolTip style in Flex4
ToolTip style in Flex4: In this example you can see how we can change the style of ToolTip. In this example we use a internal style sheet for change the style of ToolTip. Example: <?xml version="1.0" encoding
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
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
Create ToolTip Text in SWT
Create ToolTip Text in SWT       In this section, you will learn how to create ToolTip. The ToolTip is the element of graphical user interface used in the conjunction
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
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 Code - Design concepts & design patterns
ToolTip Code  Dear Sir, One more question i have.In my web page many students' roll number are there.I want to dispaly student's information...)Only by placing,not by clicking.No new page should open.I heard ki Tooltip can
ToolTip style using styleManager in Flex4
ToolTip style using styleManager in Flex4: In this example you can see how we can change the style of ToolTip. In this example we use a styleManager for change the style of ToolTip. Example: <?xml version="1.0
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
ToolTip Code - Design concepts & design patterns
ToolTip Code  Dear Sir, One more question i have.In my web page many students' roll number are there.I want to dispaly student's information just... by placing,not by clicking.No new page should open.I heard ki Tooltip can be used
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
Swing UI alignment Issue on different Platform - Swing AWT
Swing UI alignment Issue on different Platform  Hi, We are developing screens using Java Swing on windows. The problem is when we take the same screen in Linux machine, The alignment is changing. This is happening if we change
Swing UI alignment Issue on different Platform - Swing AWT
Swing UI alignment Issue on different Platform  Hi, We are developing UI using Java Swing on windows. The problem is when we Test the same Ui... of the buttons are not displaying on the UI and panel alignment is also getting
 

 

 

DMCA.com