How can I add tooltip on content of table

Question

I am very new to java script. I wanted to add tooltip to given below content. There is one way of doing it that is we can do by Adding title to every td tag. Now How can I add title to every td with same value. I am not allowed to touch html code below written here as It is automatic generated code using Jtbale Plugin.

<tbody>
<tr class="jtable-data-row jtable-row-even">
    <td>admin-ui</td>
    <td>/admin/manage/client</td>
    <td>Client Manager</td>
    <td>Used for redirecting to Client Management page</td>

</tr>
<tr class="jtable-data-row">
    <td>admin-ui</td>
    <td>/admin/manage/configuration</td>
    <td>Configuration Manager</td>
    <td>Used for redirecting to configuration page</td>

</tr>

Any Help Will be appreciated.

Answer 1

You can add a title-tag via the .attr()-function and just invoke the tooltip after that:

$('table td').attr('title', 'testtitle').tooltip();

To expand the tooltip to the width of it's content you may have to add the following css:

.ui-tooltip{
    max-width: 100%;
}

Demo