Home » Jquery » javascript – Dynamic load content with tooltip not working-Exceptionshub

javascript – Dynamic load content with tooltip not working-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am beginner in JS. I have dynamic html load from php (jquery).
In result from php I have this html:

<img title="Mleko" class="info-tooltip" style="max-height:15px" src="assets/ikonki/mleko.png">
<img title="Jaja" class="info-tooltip" style="max-height:15px" src="assets/ikonki/jajka.png">

This is my tooltip code:

<script type="text/javascript">
    $(document).ready(function () {
        $(".info-tooltip").tooltip({
            tooltipClass: "tooltip-styling",
            position: {
                my: "left bottom",
                at: "center top-10",
                collision: "none"
            }
        });
    });
</script>

And tooltip is not working 🙁 It’s not showing.
I have in my page Bootstrap and jquery.

When I add this images normally, in html code – this work fine.

Problem is only with images (tooltip) dynamic load from php.

How can I repair it?

How to&Answer:

You say the first HTML example is dynamically loaded – I assume you mean that you’re doing this using AJAX. As such you need to call .tooltip() on the new content after the AJAX request completes and the new HTML is added to the DOM.

To do this use a promise or the success callback, something like this:

$.ajax({
  url: '/yourpage',
  data: { foo: bar },
  success: function(html) {
    $('#container').append(html);

    // instantiate tooltips here...
    $("#container .info-tooltip").tooltip({
      tooltipClass: "tooltip-styling",
      position: {
        my: "left bottom",
        at: "center top-10",
        collision: "none"
      }
    });
  }
});