abhishek abhishek - 7 months ago 19
Javascript Question

How to dynamically create a table cell with on click property and a tool tip which would be hyperlink to the page

I am dynamically creating a table with the following code

tr.append("<td onclick=loaddata('"+ b[j].ItemNo +"')>" + b[j].ItemNo + "</td>");
tr.append("<td >" + b[j].Description + "</td>");
tr.append("<td>" + b[j].ModelNo + "</td>");


I want to put a tool tip on the first cell which will show a link saying Click on Item No to perform what If Analysis and when a user clicks it I want to perform this action
href='Item.jpage?item=A4710102800'
.

Answer

As far as tooltips are concerned, it's a pretty easy thing to do.

.hasTooltip {
  position: relative;
}
.hasTooltip:hover > .tooltip {
  display: inline-block;
}
.tooltip {
  display: none;
  position: absolute;
  right: -30px;
  top: 0;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid #444;
  background: rgba(125, 125, 125, 0.8);
  width: 100%;
}
<table>
  <tr>
    <td class="hasTooltip">Hover me!<a class="tooltip" href="#dummy" title="">This is a tooltip</a>
    </td>
  </tr>
</table>

Blending it with your code :

tr.append("<td class=\"hasTooltip\" onclick=loaddata(\""+ b[j].ItemNo +"\")>" + b[j].ItemNo + "<a class=\"tooltip\" href=\"Item.jpage?item=" + b[j].ItemNo + "\" title=\"\"></a></td>");

Let me know if it isn't clear or if I misunderstood you.

Comments