Mouse Over functionality

Posted on 2009-04-08
Last Modified: 2012-05-06
Hi Experts,
           I have the attached table on my jsp page. As you can see, this is not a pretty table. What I want to achieve is that:
     * Right now I am displaying an equation like 10/100=10%.
     What I want is: Just to display 10% in every cell but when a user rolls his mouse over the value, it should display the calculation 10/100=10% in a small pop up like display.

      Right now I have no clue how to do this. please help me out.
Question by:aman0711
  • 3

Accepted Solution

avdej earned 500 total points
ID: 24102570
I suppose, the simplest and proven way to achieve the desired behavior is to do the following:
(See the modified line in the attached code snippet)

1. place information you want to display on mouseOver into a value of 'title' attribute of a <TD> element.
2. reduce data amount within <TD></TD> as you've mentioned above.

At run time a value of 'title' attribute will be displayed as "Tooltip" in most browsers.
If it you need more styling/displaying options then you will have to extend this solution by means of JavaScript/CSS.

3. Write JS/CSS code that meet your need and embed it into the page source at a proper place.
4. For each <TD> element generate/add:
   a)  a unique 'id' attribute.
   b) onmouseover="javascript:{funcName}('{ID}')" AND onmouseout="javascript:{funcName}('{ID}')" entries
   {funcName} is the name of your JS mouse event handler (see 3.)
   {ID} is the value of id attribute of that particular <TD> element.

I wish you a lot of success,

<TD align="center" title="<%= totalMetrics==0 ? "NA" : rs1.getInt(5)+"/"+rs1.getInt(6)+"="+rs1.getFloat(7)+"%" %>"><%= totalMetrics==0 ? "NA" : rs1.getFloat(7)+"%" %></TD>

Open in new window

LVL 10

Author Comment

ID: 24107410
Thank you Avdej :-)
LVL 10

Author Closing Comment

ID: 31568217
Thank you so much :-)
LVL 10

Author Comment

ID: 25852166
Code and snapshot to be replaced in the question:

<table border="1" cellspacing="1" bgcolor="#FFFFFF" style="font-size:0.9em" width="500">
                <th align="center"><b>App</b></th>
                        Calendar cal = Calendar.getInstance();
                        SimpleDateFormat sdf = new SimpleDateFormat("MMM");
                        cal.set(Calendar.MONTH, Calendar.JULY);
                        for (int i = 0; i < 12; i++) {
                                  java.util.Date month = cal.getTime();
                <TH align="center"><%=sdf.format(month)%></TH>
                        cal.roll(Calendar.MONTH, 1);
                Connection conn = null;
                conn = db.getConnection();
                String sql = "";
                PreparedStatement pstmt, subpstmt = null;
                ResultSet rs, rs1 = null;
                sql = "Select DISTINCT App from SAMPLE_TABLE";
                pstmt = conn.prepareStatement(sql);
                rs = pstmt.executeQuery();
                while ( {
                                String subquery = "Select * from( Select * from SAMPLE_TABLE2 WHERE APPL IN ('"
                                + rs.getString(1)
                                + "') ORDER BY YEAR , DECODE(UPPER(MONTH), 'JAN', 7, 'FEB', 8, 'MAR', 9, 'APR', 10, 'MAY', 11, 'JUN', 12, 'JUL', 1, 'AUG', 2, 'SEP', 3, 'OCT', 4, 'NOV', 5, 'DEC', 6) ) WHERE ROWNUM<=12 and ASP='xyz'";
                                subpstmt = conn.prepareStatement(subquery);
                                rs1 = subpstmt.executeQuery();
                                while ( {
                        int totalMetrics = rs1.getInt(6);
                <TD align="center"><%= totalMetrics==0 ? "NA" :  (rs1.getInt(5)+"/"+rs1.getInt(6)+"="+rs1.getFloat(7)+"%") %></TD>

Open in new window


Featured Post

ScreenConnect 6.0 Free Trial

At ScreenConnect, partner feedback doesn't fall on deaf ears. We collected partner suggestions off of their virtual wish list and transformed them into one game-changing release: ScreenConnect 6.0. Explore all of the extras and enhancements for yourself!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Desingning Refactoring existing code 2 24
CSV file parsing thru Java 13 31
Adding Row and Cell on a table 14 20
innerHTML 7 23
Go is an acronym of golang, is a programming language developed Google in 2007. Go is a new language that is mostly in the C family, with significant input from Pascal/Modula/Oberon family. Hence Go arisen as low-level language with fast compilation…
Java functions are among the best things for programmers to work with as Java sites can be very easy to read and prepare. Java especially simplifies many processes in the coding industry as it helps integrate many forms of technology and different d…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question