I have a table like this:

<tr data-id="{{ $user->id  ?? '' }}" data-name="{{ $user->name ?? '' }}">
  <td>{{ $user->id }}</td>
  <td><a class="information text-danger float-left"><i class="fa fa-info-circle"></i></a>{{ $user->name }}</td>
</tr>

As you can see I have passed data-id and data-name to <tr>.

And this is the script for showing those information on Tooltip:

$(document).on('mouseover', '.information', function() {
  let elementMouseOver = $(this);
  
  elementMouseOver.tooltip({
    title: "<table class='table table-responsive table-borderless text-light'>" +
      "<tr><td>UserId:</td><td>" + elementMouseOver.closest('tr').attr('data-id') + "</td></tr><tr><td>UserName:</td><td>" + elementMouseOver.closest('tr').attr('data-name') + "</td></tr></table>",
    html: true,
    placement: "left",
    container: 'body'
  });
});

Then I've added this style:

.tooltip-inner {
  max-width: none;
  white-space: nowrap;
  background: #000000;
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
  color: gray;
  margin: 0;
  padding: 0;
}

So now it should be showing the information but it's not.

In fact when I console.log the elementMouseOver.closest('tr').attr('data-id') and elementMouseOver.closest('tr').attr('data-name'), they properly appears.

There must be a problem with the CSS part that does not show the Tooltip.

So if you have any idea about this, please let me know...