Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Get tooltip of table cell (td) when hovering over cell

How can I get this query to display tooltip on every row where td has id="tooltipexcess"?

In a table with dynamic number of rows, I’m trying to use jquery mouseoover & tooltip to show the full value of a TD cell since it’s display width on my screen is limited. The code I have works for the first row but not the 2rd, 3rd, or additional rows.

<table class="table table-borderless table-sm table-limit-excess rounded mt-2">
        <tbody><tr class="bg-primary text-white">
            <th class="pl-2">Key</th>
            <th class="pr-2">Data</th>
            <th class="pr-2">Condition</th>
        </tr>
            <tr>
                <td>12</td>
                <td id="tooltipexcess" title="123456789012345,  A123456789012345">123456789012345,  A123456789012345</td>
                <td>Equal To</td>
            </tr>
            <tr>
                <td>92</td>
                <td id="tooltipexcess">322312323</td>
                <td>Contains</td>
            </tr>
            <tr>
                <td>230</td>
                <td id="tooltipexcess">123233,  333,  3312213,  2132321,  3fsdff</td>
                <td>Equal To</td>
            </tr>
    </tbody>
</table>

<script>
    // here we add tooltip hint to compensate for table cell limited on display width
    $("#tooltipexcess").on("mouseover", function () {
        $(this).attr("title", $(this).text());
    });

</script>

I attempted the following, but this doesn’t work at all.

<script>
    // here we add tooltip hint to compensate for table cell limited on display width
    $("#tooltipexcess").on("mouseover", function () {
        var td = $(this).closest('tbody').find('> td > td:eq(' + td.index() + ')');
        td.attr("title", td.text());
    });
</script>
Tags:

3

Answers


  1. 0

    Id can be only one in the entire dom.
    You can use class instead.
    Check the below code and try to hover over.

        $(".tooltipexcess").on("mouseover", function (){
        console.log($(this).text());
        // YOUR LOGIC
        $(this).attr("title", $(this).text());
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-borderless table-sm table-limit-excess rounded mt-2">
        <tbody><tr class="bg-primary text-white">
            <th class="pl-2">Key</th>
            <th class="pr-2">Data</th>
            <th class="pr-2">Condition</th>
        </tr>
            <tr>
                <td>12</td>
                <td class="tooltipexcess" title="123456789012345,  A123456789012345">123456789012345,  A123456789012345</td>
                <td>Equal To</td>
            </tr>
            <tr>
                <td>92</td>
                <td class="tooltipexcess">322312323</td>
                <td>Contains</td>
            </tr>
            <tr>
                <td>230</td>
                <td class="tooltipexcess">123233,  333,  3312213,  2132321,  3fsdff</td>
                <td>Equal To</td>
            </tr>
    </tbody>
</table>
    Login or Signup to reply.
  2. 0

    Okay so first you need unique id through out your code for each elm. atleast to use with jquery or js.

    just replace your jquery code with this

    <script>
    // here we add tooltip hint to compensate for table cell limited on display width
    $(".tooltipexcess").on("mouseover", function () {
        $(this).attr("title", $(this).text());
    });
</script>

    Id’s with class for all relevant elements here is the sample code.

    <tr>
        <td>12</td>
        <td class="tooltipexcess" title="123456789012345,  A123456789012345">123456789012345,  A123456789012345</td>
        <td>Equal To</td>
    </tr>
    <tr>
        <td>92</td>
        <td class="tooltipexcess">322312323</td>
        <td>Contains</td>
    </tr>
    <tr>
        <td>230</td>
        <td class="tooltipexcess">123233,  333,  3312213,  2132321,  3fsdff</td>
        <td>Equal To</td>
    </tr>
    Login or Signup to reply.
  3. 0

    Have you tried to use a class instead of an id here?

        <table
      class="table table-borderless table-sm table-limit-excess rounded mt-2"
    >
      <tbody>
        <tr class="bg-primary text-white">
          <th class="pl-2">Key</th>
          <th class="pr-2">Data</th>
          <th class="pr-2">Condition</th>
        </tr>
        <tr>
          <td>12</td>
          <td class="tooltipexcess">123456789012345, A123456789012345</td>
          <td>Equal To</td>
        </tr>
        <tr>
          <td>92</td>
          <td class="tooltipexcess">322312323</td>
          <td>Contains</td>
        </tr>
        <tr>
          <td>230</td>
          <td class="tooltipexcess">123233, 333, 3312213, 2132321, 3fsdff</td>
          <td>Equal To</td>
        </tr>
      </tbody>
    </table>
    <script>
      // here we add tooltip hint to compensate for table cell limited on display width
      $(".tooltipexcess").on("mouseover", function () {
        $(this).attr("title", $(this).text());
      });
    </script>

    With this code, every row has its appropriate tooltip.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search