Bootstrap Tooltip doesn't not work in childrow

fmarguerie

hio,
In the following test case, one bootstrap tooltip works and the other does not
Please , any idea ?
I'm lost

http://live.datatables.net/lumoxive/16/edit

fmarguerie

BTW, tooltips does not work neitht on fontawesome,
http://live.datatables.net/remojage/1/edit
I knos this font awesome pb is not link to data table but I have no idea .
It works if I use JPG instead of font awesome

Sergey2107

$('#example tr td>button[data-toggle="tooltip"]').tooltip();
or dynamic table add initComplete
$('#example').dataTable( {
"initComplete": function(settings, json) {
$('#example tr td>button[data-toggle="tooltip"]').tooltip();
}
} );

fmarguerie

Hi,
I tried to add your code in my test case, but I rollbak...
http://live.datatables.net/remojage/3/edit
I don't manage to make it works,
Could you fix it in my testcase plese, I'm lost

I don't wan't tooltip work only for buttons, I want it works for all the fontawesome (red pen on the top ) and red per in the action column.
Regards,
François

fmarguerie

Anyone to help me ?

allan

$('[data-toggle="tooltip"]').tooltip();

is selecting all matching elements when that code runs. But the child row is not in the document when that code runs, hence why it isn't picking it up.

Simply run $('[data-toggle="tooltip"]').tooltip(); again after you have displayed the child row: http://live.datatables.net/remojage/4/edit

Allan

fmarguerie

Hi,
Allan, sorry , but I opened your test case and it does not work.

-the red pen in the action column does not work.
the red pen on the top of the page neither ( and this one iis not in a childrow, or in any data table )

kthorngren

The tooltip for both FA icons is working in the test case:

Kevin

fmarguerie

I can confim that it does not work at home.
Maybe the browser ?
I use Firefox .
On your screen shot, it is not the tootip of bootstrap but tte native tooltip that appears after a few second. The bootsrap tooltip appears immediately and get an sort of arrow .

kthorngren

Might be the browser. Have you tried others? I use Chrome. If the tooltip isn't working with the Font Awesome icon you have at the top of the page then this isn't a Datatables issue. Stack Overflow is a good resource for troubleshooting general Javascript, Bootstrap and other issues.

Kevin

allan

This is what it looks like in Firefox for me:

Sergey2107

http://live.datatables.net/sofubola/1/edit

fmarguerie

Hi, The test case
http://live.datatables.net/sofubola/1/edit works well
http://live.datatables.net/remojage/4/edit does not work,

Thanks a lots.
François

fmarguerie

Hi, I must confess I have a strange issue with tooltips : see
http://live.datatables.net/remojage/8/edit

The toolitp works if I USE
<!--script src="https://kit.fontawesome.com/1527916845.js" crossorigin="anonymous"></script--->
But NOT if I use
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/js/all.min.js" crossorigin="anonymous"></script>

I mange to make it works in the childrow due tu this thread, but Everythink is broken if I use FA 6.1.0.
ANyone have an explanation ?

in http://live.datatables.net/remojage/4/edit it does not work neither !

allan

You'd probably need to ask the FontAwesome folk about that.

Allan

fmarguerie

Sure but in the 2 following test cases , FontAwesome , 6.1.0 is used, one works, and the other don't: Curious

http://live.datatables.net/sofubola/1/edit works well
http://live.datatables.net/remojage/4/edit does not work,
I don't see any difference in the code.

fmarguerie

if works well if I use a span

    <span data-toggle="tooltip" data-placement="right" title='Ajouter un client '>
                            <i  class='fas fa-plus-circle fa-2x' style='color:blue'></i>
                        </span>

JoseTT

@fmarguerie you must initialize the TOOLTIP before any other thing...
i.e.:

<script type="text/javascript">
    $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip(); //First, the tooltip initialization...
        //Then, the rest of magic must be below here....

allan

Also note that $('[data-toggle="tooltip"]') will select elements that exist in the DOM already. If you are then placing an item into the DOM which should have a tooltip after that line has been executed (e.g. in a child row, like the original question mentions) you would need to initialise the tooltip again, once it is in the DOM.

Allan