Bootstrap Tooltip doesn't not work in childrow

Bootstrap Tooltip doesn't not work in childrow

fmargueriefmarguerie Posts: 36Questions: 3Answers: 0
edited June 2022 in Free community support

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

Replies

  • fmargueriefmarguerie Posts: 36Questions: 3Answers: 0
    edited June 2022

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

  • Sergey2107Sergey2107 Posts: 2Questions: 0Answers: 0
    edited June 2022

    $('#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();
    }
    } );

  • fmargueriefmarguerie Posts: 36Questions: 3Answers: 0

    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

  • fmargueriefmarguerie Posts: 36Questions: 3Answers: 0

    Anyone to help me ?

  • allanallan Posts: 63,578Questions: 1Answers: 10,483 Site admin
    $('[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

  • fmargueriefmarguerie Posts: 36Questions: 3Answers: 0

    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 )

  • kthorngrenkthorngren Posts: 21,381Questions: 26Answers: 4,959

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

    Kevin

  • fmargueriefmarguerie Posts: 36Questions: 3Answers: 0
    edited June 2022

    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 .

  • kthorngrenkthorngren Posts: 21,381Questions: 26Answers: 4,959

    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

  • allanallan Posts: 63,578Questions: 1Answers: 10,483 Site admin

    This is what it looks like in Firefox for me:

  • fmargueriefmarguerie Posts: 36Questions: 3Answers: 0

    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

  • fmargueriefmarguerie Posts: 36Questions: 3Answers: 0

    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 !

  • allanallan Posts: 63,578Questions: 1Answers: 10,483 Site admin

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

    Allan

  • fmargueriefmarguerie Posts: 36Questions: 3Answers: 0
    edited June 2022

    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.

  • fmargueriefmarguerie Posts: 36Questions: 3Answers: 0

    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>
    
  • JoseTTJoseTT Posts: 1Questions: 0Answers: 0
    edited January 2023

    @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....
    
  • allanallan Posts: 63,578Questions: 1Answers: 10,483 Site admin

    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

Sign In or Register to comment.