MeadInKent
| Feedback | |

Adding tooltips to Excel styled HTML tables to show cell formulas

An Excel sheet (SiteOct02\meadinkent Excel files\MAKE html with Hover Nov17.xlsm) and VBA functions can generate the HTML code for some table rows and columns. The CSS styling for the cells and the tooltips must exist within the stylesheet being used by the page. It doesn't format the cells other than applying the appropriate number formats (e.g. no colouring is added).

The xlmik_basic12.css stylesheet contains <td> classes edge, cell and cell_r. It also has the necessary tooltip styling.

MeadInKent - Make HTML with Hover Nov17.xlsm C D E F
4 Empty ValueItems ValueRate ValueTax
5 Dogs Value3 =RANDBETWEEN(10,25)21.0 =D5*(E5/100)63%
6 Cats Value4 =RANDBETWEEN(10,25)11.0 =D6*(E6/100)44%
7 Birds Value2 =RANDBETWEEN(10,25)24.0 =D7*(E7/100)48%
8 Snakes Value1 =RANDBETWEEN(10,25)10.0 =D8*(E8/100)10%
9 Empty Empty02/11/2017 Empty

To add a tooltip / comment to a table cell use the following code (having defined CellWithComment and CellComment within the CSS).

 <td class='cell_r CellWithComment'><span class='CellComment'>=D6*(E6/100)</span>44%</td></tr>

Note that these CellComments do not work with older IE or Chrome browsers and this styling has been removed from my website pages. As an alternative I am using the basic Title attribute in table cells. The CellComments styling has been left in the CSS file and can hopefully be reinstated soon.

 <td class='cell_r' Title="=D6*(E6/100)">44%</td></tr>


file: ExcelMakeTableNov17.htm © meadinkent.co.uk 2017 Page updated Nov17 CMIDX S0 P00 N