Myujth

I have several views that share a common partial view, each with a varying number of tables and rows containing different data elements. When a user hovers their mouse over any different row, i'd like to have the shared partial view display a string of text specific to that row's expected data type, and disappear when they hover out of that row. Below is an example main view with two example table rows.

<table>
<tr onmouseover="showDef(2)" onmouseout="showDef(0)">
 <td>
 <label for="TerminalID" class="formlabel"><label class="asterisk">*</label>Terminal ID:</label>
 @Html.TextBoxFor(model => Model.transactions.NGT_TERMINAL_ID, new @class = "forminput", value = "", required = "required" )
 </td>
</tr>
<tr onmouseover="showDef(13)" onmouseout="showDef(0)">
 <td>
 <label for="Amount" class="formlabel"><label class="asterisk">*</label>Amount:</label>
 @Html.TextBoxFor(model => Model.transactions.NGT_AMOUNT, new @class = "forminput", maxlength = "9", type = "number", onblur = "Validate(id); GetAmounts(id, 'tipamt')", id = "amt", required = "required" )
 </td>
</tr></table>

At this point my previous setup worked when using iFrames for the main and partial view, which i'm moving away from. Before anyone suggests simply using a tooltip for each row, there are approximately 64 views, each with at least a dozen rows, some up to thirty and from time to time, the descriptions change a little, so changing 60 tooltips one by one is not exactly ideal. Below is the current javascript initiating the text change and below that, the target iframe (partial view)and after that, the CSS helping out.

Javascript:

function showDef(t) 
 top.sideframe.activeDef.style.visibility = "hidden";
 top.sideframe.activeDef = top.sideframe.document.getElementById("def" + t);
 top.sideframe.activeDef.style.visibility = "visible";
 

target iFrame (partialview now):

<label id="def0" class="def"></label>
<label id="def2" class="def">Terminal Identification number</label>
<label id="def13" class="def">Amount of stuff</label>

CSS:

.def 
 position: absolute;
 visibility: hidden;
 left: 10px;
 top: 4%; /* text position from top of screen*/
 width: 97%;
 color: #FE0101; /* text */
 margin-top: 20px;
 background: #eef1f6; /* body */

Any direction is much appreciated.