API tools faq
paste
Advertisement
NoSalt

ToolTip.html

NoSalt
May 17th, 2012
118
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.         <title> IE Annoyance </title>
  7.         <style type="text/css">
  8.             body {
  9.                 font-family: "Arial", "Verdanda", sans-serif;
  10.             }
  11.  
  12.             table.testTable th,td {
  13.                 padding: 8px 8px 8px 8px;
  14.                 font-size: 14px;
  15.             }
  16.            
  17.             th.testTableHeaderCell {
  18.                 position: relative;
  19.                 z-index: 24;
  20.                 font-weight: 700;
  21.                 text-align: center;
  22.                 border: solid 1px #888888;
  23.                 background-color: #f0f0f0;
  24.                 margin: 0px 6px 0px 0px;
  25.                 vertical-align: middle;
  26.             }
  27.            
  28.             th.testTableHeaderCell:hover {
  29.                 z-index: 25;
  30.                 color:#a73333;
  31.                 background-color:#ffff99;
  32.                 border:1px solid #ffcc00;
  33.                 cursor: pointer;
  34.             }
  35.            
  36.             th.testTableHeaderCell:active {
  37.                 background-color:#dff4ff;
  38.                 border:1px solid #c2e1ef;
  39.             }
  40.            
  41.             th.testTableHeaderCell span.tooltip {
  42.                 display: none;
  43.             }
  44.            
  45.             th.testTableHeaderCell:hover span.tooltip {
  46.                 display: block;
  47.                 position: absolute;
  48.                 overflow: visible;
  49.                 left: auto;
  50.                 width: 15em;
  51.                 color: #8a1f11;
  52.                 background-color: #fbe3e4;
  53.                 border: solid 1px #fbc2c4;
  54.                 padding: 2px 4px 2px 4px;
  55.                 font-size: 1.05em;
  56.                 font-weight: 500;
  57.                 text-align: left;
  58.                 z-index: 100;
  59.             }
  60.            
  61.             td.testTableBodyCell {
  62.                 position: relative;
  63.                 z-index: 24;
  64.                 font-weight: 700;
  65.                 text-align: center;
  66.                 border: solid 1px #888888;
  67.                 background-color: #f0f0f0;
  68.                 margin: 0px 6px 0px 0px;
  69.                 vertical-align: middle;
  70.             }
  71.            
  72.             td.testTableBodyCell:hover {
  73.                 z-index: 25;
  74.                 color:#a73333;
  75.                 background-color:#ffff99;
  76.                 border:1px solid #ffcc00;
  77.                 cursor: pointer;
  78.             }
  79.            
  80.             td.testTableBodyCell:active {
  81.                 background-color:#dff4ff;
  82.                 border:1px solid #c2e1ef;
  83.             }
  84.            
  85.             td.testTableBodyCell span.tooltip {
  86.                 display: none;
  87.             }
  88.            
  89.             td.testTableBodyCell:hover span.tooltip {
  90.                 display: block;
  91.                 position: absolute;
  92.                 overflow: visible;
  93.                 left: auto;
  94.                 width: 15em;
  95.                 color: #529214;
  96.                 background-color:#e6efc2;
  97.                 border:1px solid #c6d880;
  98.                 padding: 2px 4px 2px 4px;
  99.                 font-size: 1.05em;
  100.                 font-weight: 500;
  101.                 text-align: left;
  102.                 z-index: 100;
  103.             }
  104.            
  105.             th.testTableFooterCell {
  106.                 position: relative;
  107.                 z-index: 24;
  108.                 font-weight: 700;
  109.                 text-align: center;
  110.                 border: solid 1px #888888;
  111.                 background-color: #f0f0f0;
  112.                 margin: 0px 6px 0px 0px;
  113.                 vertical-align: middle;
  114.             }
  115.            
  116.             th.testTableFooterCell:hover {
  117.                 z-index: 25;
  118.                 color:#a73333;
  119.                 background-color:#ffff99;
  120.                 border:1px solid #ffcc00;
  121.                 cursor: pointer;
  122.             }
  123.            
  124.             th.testTableFooterCell:active {
  125.                 background-color:#dff4ff;
  126.                 border:1px solid #c2e1ef;
  127.             }
  128.            
  129.             th.testTableFooterCell span.tooltip {
  130.                 display: none;
  131.             }
  132.            
  133.             th.testTableFooterCell:hover span.tooltip {
  134.                 display: block;
  135.                 position: absolute;
  136.                 overflow: visible;
  137.                 left: auto;
  138.                 width: 15em;
  139.                 color: #a73333;
  140.                 background-color: #ffff99;
  141.                 border: 1px solid #ffcc00;
  142.                 padding: 2px 4px 2px 4px;
  143.                 font-size: 1.05em;
  144.                 font-weight: 500;
  145.                 text-align: left;
  146.                 z-index: 100;
  147.             }
  148.         </style>
  149.     </head>
  150.     <body>
  151.         <h3> ToolTip </h3>
  152.  
  153.         <div>
  154.             <table border="1" class="testTable">
  155.                 <thead class="testTableHeader">
  156.                     <tr>
  157.                         <th class="testTableHeaderCell"> header cell 01 <span class="tooltip"> again ... header cell 01 </span></th>
  158.                         <th class="testTableHeaderCell"> header cell 02 <span class="tooltip"> again ... header cell 02 </span></th>
  159.  
  160.                         <th class="testTableHeaderCell"> header cell 03 <span class="tooltip"> again ... header cell 03 </span></th>
  161.                         <th class="testTableHeaderCell"> header cell 04 <span class="tooltip"> again ... header cell 04 </span></th>
  162.                         <th class="testTableHeaderCell"> header cell 05 <span class="tooltip"> again ... header cell 05 </span></th>
  163.  
  164.                     </tr>
  165.                 </thead>
  166.                 <tbody class="testTableBody">
  167.                     <tr>
  168.                         <td class="testTableBodyCell"> body cell 01 <span class="tooltip"> again ... body cell 01 </span></td>
  169.                         <td class="testTableBodyCell"> body cell 02 <span class="tooltip"> again ... body cell 02 </span></td>
  170.  
  171.                         <td class="testTableBodyCell"> body cell 03 <span class="tooltip"> again ... body cell 03 </span></td>
  172.                         <td class="testTableBodyCell"> body cell 04 <span class="tooltip"> again ... body cell 04 </span></td>
  173.                         <td class="testTableBodyCell"> body cell 05 <span class="tooltip"> again ... body cell 05 </span></td>
  174.  
  175.                     </tr>
  176.                 </tbody>
  177.                 <tfoot class="testTableFooter">
  178.                     <tr>
  179.                         <th class="testTableFooterCell"> footer cell 01 <span class="tooltip"> again ... footer cell 01 </span></th>
  180.                         <th class="testTableFooterCell"> footer cell 02 <span class="tooltip"> again ... footer cell 02 </span></th>
  181.  
  182.                         <th class="testTableFooterCell"> footer cell 03 <span class="tooltip"> again ... footer cell 03 </span></th>
  183.                         <th class="testTableFooterCell"> footer cell 04 <span class="tooltip"> again ... footer cell 04 </span></th>
  184.                         <th class="testTableFooterCell"> footer cell 05 <span class="tooltip"> again ... footer cell 05 </span></th>
  185.  
  186.                     </tr>
  187.                 </tfoot>
  188.             </table>
  189.         </div>
  190.     </body>
  191. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!