Using Tooltip and Ellipsis for table cell value

See more:

jQuery

Hi,

I am runtime Adding rows to the table and i want to give Ellipsis and tooltip for the table cell value as i have done in the following code.

This code shows the ellipsis as well as tooltip but the problem is that if there is space in the value that i want to bind to the table cell then it shows tooltip till the first space i.e if i want to bind the Product Name 1 in table cell then it shows the tooltip of simply Product not Product Name 1.

Please Help

$('#tblProducts tr:last').after('<tr  style="removed: pointer" onmouseover="HighLight(this);" onmouseout="UnHighLight(this);"  onclick="Select(this);" id="manageablerow"><td style="overflow:hidden; text-overflow:ellipsis;white-space:nowrap; width:90px"  title =' + productCategoryName + ' id="productCategoryName">' + productCategoryName +
                                  '</td><td style="overflow:hidden; text-overflow:ellipsis;white-space:nowrap; width:90px"  title =' + productName + ' id="productName">' + productName +
                                   ' </td><td id="quantity">' + quantity +
                                   ' </td><td id="included">' + include +
                                   ' </td><td id="unitPrice">' + unitPrice +
                                   ' </td><td id="price">' + price +
                                   ' </td><td id="discount">' + finalDisc +
                                   ' </td><td id="totalProductPrice">' + totalProductPrice +
                                    '</td><td id="showImage">' + addImage +
                                   ' </td><td><a href="#"  id="btnEdit">Edit</a> <a href="#" id="btnDelete">Delete</a></td><td><input type="hidden" id="hdnProductCategory" value="' + productType + '"></td><td><input type="hidden" id="hdnProductID" value="' + productID + '"></td></td></tr>');
                       });

Thanks,

Umesh Tayade