Web Publishing
Tooltip Demo: HTML Table

The document demos tooltip pop-up information boxes for an HTML table.

Tooltip pop-ups are associated with images, Thus, the table appears first followed by an exact image of the table. Moving the mouse pointer over any table cell in the image will display the actual XHTML markup associated with that table cell.

Note that the XHTML for this document follows the image.

Zogby

  Polls Bias Errors   Bad
State EV Act Est Raw Fat Raw Fat   Pick
Colorado 9 5.2 2.0 -3.2 -28.8 3.2 28.8
Florida 27 5.0 0.0 -5.0 -135.0 5.0 135.0
Iowa 7 0.9 5.0 -5.9 -41.3 5.9 41.3   X
Maine 4 8.8 11.0 -2.2 -8.8 2.2 8.8
Michigan 17 3.4 6.0 -2.6 -44.2 2.6 44.2
Minnesota 10 3.5 6.0 -2.5 25.0 2.5 25.0
Nevada 5 2.6 5.0 2.4 12.0 2.4 12.0
New Mexico 5 0.8 3.0 -3.8 -19.0 3.8 19.0   X
Ohio 20 2.1 6.0 3.9 78.0 3.9 78.0
Pennsylvania 21 2.3 4.0 -1.7 -35.7 1.7 35.7
Wisconsin 10 0.4 6.0 -5.6 -56.0 5.6 56.0
Georgia 15 16.7 10.0 -6.7 -100.5 6.7 100.5
 
Totals   -32.9 -404.3 45.5 584.3   2
 
Average   -2.7% -2.7% 3.8% 3.9%   17%

Move the mouse over any table cell below to view the XHTML markup for that cell.

Following is the XHTML markup for this document with all JavaScript-related code highlighted.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>lfdf: Web Publishing - Tooltip Demo: HTML Table</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link rel="Stylesheet" type="text/css" href="css/Misc.css" />
<link rel="Stylesheet" type="text/css" href="css/Tables.css" />
<link rel="Stylesheet" type="text/css" href="css/Web.css" />

</head>

<body class="Body">

<script type="text/javascript" src="js/backlink.js"></script>

<div class="Text">

<p class="Title">Web Publishing<br />
Tooltip Demo: HTML Table</p>

<p class="Normal">The document demos tooltip pop-up information boxes for an
HTML table.</p>

<p class="Normal">Tooltip pop-ups are associated with images, Thus, the table
appears first followed by an exact <i>image</i> of the table. Moving the mouse
pointer over any table cell in the <i>image</i> will display the actual XHTML
markup associated with that table cell.</p>

<p class="Normal">Note that the XHTML for this document follows the image.</p>

</div><div class="Tables">

<p class="TableTitle">Zogby</p>

  <table cellpadding="0" cellspacing="0">
     <tr>
       <td class="az_bnnnn" colspan="2">&nbsp;</td>
       <td class="ac_bssnn_h" colspan="2">Polls</td>
       <td class="ac_bssnn_h" colspan="2">Bias</td>
       <td class="ac_bssns_h" colspan="2">Errors</td>
       <td class="az_bnnnn">&nbsp;</td>
       <td class="ac_bssns_h">Bad</td>
     </tr>
     <tr>
       <td class="al_bsssn_h">State</td>
       <td class="ar_bsnsn_h">EV</td>
       <td class="ar_bnssn_h">Act</td>
       <td class="ar_bnnsn_h">Est</td>
       <td class="ar_bnssn_h">Raw</td>
       <td class="ar_bnnsn_h">Fat</td>
       <td class="ar_bnssn_h">Raw</td>
       <td class="ar_bnnss_h">Fat</td>
       <td class="az_bnnnn">&nbsp;</td>
       <td class="ac_bnsss_h">Pick</td>
     </tr>
     <tr>
       <td class="al_bnsnn_cred">Colorado</td>
       <td class="ar_bnnnn">9</td>
       <td class="ar_bnsnn_cred">5.2</td>
       <td class="ar_bnnnn_cred">2.0</td>
       <td class="ar_bnsnn_cblue">-3.2</td>
       <td class="ar_bnnnn_cblue">-28.8</td>
       <td class="ar_bnsnn">3.2</td>
       <td class="ar_bnnns">28.8</td>
     </tr>
     <tr>
       <td class="al_bnsnn_cred">Florida</td>
       <td class="ar_bnnnn">27</td>
       <td class="ar_bnsnn_cred">5.0</td>
       <td class="ar_bnnnn_cred">0.0</td>
       <td class="ar_bnsnn_cblue">-5.0</td>
       <td class="ar_bnnnn_cblue">-135.0</td>
       <td class="ar_bnsnn">5.0</td>
       <td class="ar_bnnns">135.0</td>
     </tr>
     <tr>
       <td class="al_bnsnn_cred">Iowa</td>
       <td class="ar_bnnnn">7</td>
       <td class="ar_bnsnn_cred">0.9</td>
       <td class="ar_bnnnn_cblue">5.0</td>
       <td class="ar_bnsnn_cblue">-5.9</td>
       <td class="ar_bnnnn_cblue">-41.3</td>
       <td class="ar_bnsnn">5.9</td>
       <td class="ar_bnnns">41.3</td>
       <td class="az_bnnnn">&nbsp;</td>
       <td class="ar_bnnnn_gz">X</td>
     </tr>
     <tr>
       <td class="al_bnsdn_cblue">Maine</td>
       <td class="ar_bnndn">4</td>
       <td class="ar_bnsdn_cblue">8.8</td>
       <td class="ar_bnndn_cblue">11.0</td>
       <td class="ar_bnsdn_cblue">-2.2</td>
       <td class="ar_bnndn_cblue">-8.8</td>
       <td class="ar_bnsdn">2.2</td>
       <td class="ar_bnnds">8.8</td>
     </tr>
     <tr>
       <td class="al_bnsnn_cblue">Michigan</td>
       <td class="ar_bnnnn">17</td>
       <td class="ar_bnsnn_cblue">3.4</td>
       <td class="ar_bnnnn_cblue">6.0</td>
       <td class="ar_bnsnn_cblue">-2.6</td>
       <td class="ar_bnnnn_cblue">-44.2</td>
       <td class="ar_bnsnn">2.6</td>
       <td class="ar_bnnns">44.2</td>
     </tr>
     <tr>
       <td class="al_bnsnn_cblue">Minnesota</td>
       <td class="ar_bnnnn">10</td>
       <td class="ar_bnsnn_cblue">3.5</td>
       <td class="ar_bnnnn_cblue">6.0</td>
       <td class="ar_bnsnn_cblue">-2.5</td>
       <td class="ar_bnnnn_cblue">25.0</td>
       <td class="ar_bnsnn">2.5</td>
       <td class="ar_bnnns">25.0</td>
     </tr>
     <tr>
       <td class="al_bnsnn_cred">Nevada</td>
       <td class="ar_bnnnn">5</td>
       <td class="ar_bnsnn_cred">2.6</td>
       <td class="ar_bnnnn_cred">5.0</td>
       <td class="ar_bnsnn_cred">2.4</td>
       <td class="ar_bnnnn_cred">12.0</td>
       <td class="ar_bnsnn">2.4</td>
       <td class="ar_bnnns">12.0</td>
     </tr>
     <tr>
       <td class="al_bnsdn_cred">New Mexico</td>
       <td class="ar_bnndn">5</td>
       <td class="ar_bnsdn_cred">0.8</td>
       <td class="ar_bnndn_cblue">3.0</td>
       <td class="ar_bnsdn_cblue">-3.8</td>
       <td class="ar_bnndn_cblue">-19.0</td>
       <td class="ar_bnsdn">3.8</td>
       <td class="ar_bnnds">19.0</td>
       <td class="az_bnnnn">&nbsp;</td>
       <td class="ar_bnnnn_gz">X</td>
     </tr>
     <tr>
       <td class="al_bnsnn_cred">Ohio</td>
       <td class="ar_bnnnn">20</td>
       <td class="ar_bnsnn_cred">2.1</td>
       <td class="ar_bnnnn_cred">6.0</td>
       <td class="ar_bnsnn_cred">3.9</td>
       <td class="ar_bnnnn_cred">78.0</td>
       <td class="ar_bnsnn">3.9</td>
       <td class="ar_bnnns">78.0</td>
     </tr>
     <tr>
       <td class="al_bnsnn_cblue">Pennsylvania</td>
       <td class="ar_bnnnn">21</td>
       <td class="ar_bnsnn_cblue">2.3</td>
       <td class="ar_bnnnn_cblue">4.0</td>
       <td class="ar_bnsnn_cblue">-1.7</td>
       <td class="ar_bnnnn_cblue">-35.7</td>
       <td class="ar_bnsnn">1.7</td>
       <td class="ar_bnnns">35.7</td>
     </tr>
     <tr>
       <td class="al_bnsin_cblue">Wisconsin</td>
       <td class="ar_bnnin">10</td>
       <td class="ar_bnsin_cblue">0.4</td>
       <td class="ar_bnnin_cblue">6.0</td>
       <td class="ar_bnsin_cblue">-5.6</td>
       <td class="ar_bnnin_cblue">-56.0</td>
       <td class="ar_bnsin">5.6</td>
       <td class="ar_bnnis">56.0</td>
     </tr>
     <tr>
       <td class="al_bnssn_cred">Georgia</td>
       <td class="ar_bnnsn">15</td>
       <td class="ar_bnssn_cred">16.7</td>
       <td class="ar_bnnsn_cred">10.0</td>
       <td class="ar_bnssn_cblue">-6.7</td>
       <td class="ar_bnnsn_cblue">-100.5</td>
       <td class="ar_bnssn">6.7</td>
       <td class="ar_bnnss">100.5</td>
     </tr>
     <tr>
       <td class="az_bnnnn_ggray240" colspan="8">&nbsp;</td>
     </tr>
     <tr>
       <td class="al_bssss_h" colspan="2">Totals</td>
       <td class="az_bnnnn_ggray240" colspan="2">&nbsp;</td>
       <td class="ar_bsssn_cblue">-32.9</td>
       <td class="ar_bsnsn_cblue">-404.3</td>
       <td class="ar_bsssn">45.5</td>
       <td class="ar_bsnss">584.3</td>
       <td class="az_bnnnn">&nbsp;</td>
       <td class="ar_bssss">2</td>
     </tr>
     <tr>
       <td class="az_bnnnn_ggray240" colspan="8">&nbsp;</td>
     </tr>
     <tr>
       <td class="al_bssss_h" colspan="2">Average</td>
       <td class="az_bnnnn_ggray240" colspan="2">&nbsp;</td>
       <td class="ar_bsssn_cblue">-2.7%</td>
       <td class="ar_bsnsn_cblue">-2.7%</td>
       <td class="ar_bsssn">3.8%</td>
       <td class="ar_bsnss">3.9%</td>
       <td class="az_bnnnn">&nbsp;</td>
       <td class="ar_bssss">17%</td>
     </tr>
   </table>

</div><div class="Text">

<p class="Normal">Move the mouse over any table cell below to view the XHTML
markup for that cell.</p>

</div><div class="Images">

<script type="text/javascript" src="js/tooltip_gm_table.js"></script>

</div>

...

<div class="Navigation">

Top&nbsp;&nbsp;&nbsp;<a href="#"><img alt="" src="gen/Top.png"
width="12" height="16" /></a>

&nbsp;&nbsp;&nbsp;Back&nbsp;&nbsp;&nbsp;

<script type="text/javascript" src="js/backlink_do.js"></script>

</div><div class="Footer">

<hr />

<p class="Normal">© Copyright 2006 by
<a href="mailto:gmikos@livefreediefree.com">
George Mikos </a>. Plagiarizing is OK, but attributing is even better.</p>

<p class="Normal">1.0 Publication Date: None<br />
2.0 Publication Date: 01 Dec 05</p>

<p class="Normal">Revised Date: 10 Mar 06</p>

<p class="Normal">
<a href="http://validator.w3.org/check?
uri=http://www.livefreediefree.com/
WebPub_TooltipDemo_HTMLTable.htm">
<img src="gen/W3C_XHTML.png" alt="Valid XHTML 1.0!"
height="31" width="88" /></a> 
<a href="http://jigsaw.w3.org/css-validator/validator?
uri=http://www.livefreediefree.com/
WebPub_TooltipDemo_HTMLTable.htm">
<img width="88" height="31" src="gen/W3C_CSS.png"
alt="Valid CSS!" /></a></p>

</div>

<script type="text/javascript" src="js/menu_do.js"></script>
<script type="text/javascript" src="js/menu_wp_vs_tt_var.js"></script>
<script type="text/javascript" src="js/menu_com.js"></script>
<script type="text/javascript" src="js/tooltip_wz_table.js"></script>

</body>

</html>

Top       Back   

© Copyright 2006 by George Mikos. Plagiarizing is OK, but attributing is even better.

1.0 Publication Date: None
2.0 Publication Date: 01 Dec 05

Revised Date: 10 Mar 06

Valid XHTML 1.0! Valid CSS!