Tengo una tabla como esta:

 <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>

Como puede ver, pasé data-id y data-name a <tr> .

Y este es el script para mostrar esa información en 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' }); });

Luego he añadido este estilo:

 .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; }

Así que ahora debería estar mostrando la información, pero no lo está.

De hecho, cuando consola. elementMouseOver.closest('tr').attr('data-id') y elementMouseOver.closest('tr').attr('data-name') , aparecen correctamente.

Debe haber un problema con la parte CSS que no muestra la información sobre herramientas.

Así que si tienes alguna idea sobre esto, por favor házmelo saber...