Wait for Font Awesome JS to convert i to svg before binding

Question

I've got a bit of an issue when it comes to binding onto a Font Awesome element that is generated by Font Awesome JS <i> to <svg>.

I am trying to use tooltipster to attach a custom HTML element to an <i> tag in my Laravel 5 application like this

Blade

<i class="fa fa-ellipsis-h doc-settings room-image-settings-tooltip" data-tooltip-content="#room_image_settings_{{$key}}" aria-hidden="true"></i>

JS

//Tooltip enable
$('.room-image-settings-tooltip').tooltipster({
    theme: 'tooltipster-punk',
    trigger: 'click',
    animation: 'grow',
    minWidth: 300,
    interactive:true,
    animationDuration:200
});

Which results in Font Awesome creating an SVG like this

Which as you can see, has worked great. It's taken over all of the attributes. The issue is that, without font awesome 5, this binds fine when it remains as an <i> element, but when it comes to converting to <svg>, even though the above tooltipster js is inside a document ready tag, the tooltipster code has to be re-ran in the console to get it to work and bind on the <svg>.

My JS is being loaded in this order

app.js

require('@fortawesome/fontawesome-pro/js/all');

$(document).ready(function(){
   //Tooltip enable
   $('.room-image-settings-tooltip').tooltipster({
       theme: 'tooltipster-punk',
       trigger: 'click',
       animation: 'grow',
       minWidth: 300,
       interactive:true,
       animationDuration:200
   });
});

So surely Font Awesome should be running before the tooltipster code and it should bind correctly to the new SVG element?

Am I getting this wrong? Somewhere deep down is the <i> to <svg> code ran in a document ready tag and it running after my own app.js file?

How can I listen for when the SVG's are finished converting and run JS then?

Answer 1

I have no idea why this question was downvoted, as its a legitimate question and Font awesome have a listener specifically for it. After contacting support for font awesome 5 they have directed me to the documentation to listen for the completed <i> to <svg> conversion here.