I've got a bit of an issue when it es 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 es 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?
I've got a bit of an issue when it es 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 es 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?
Share Improve this question asked Aug 7, 2018 at 9:40 S_RS_R 2,0085 gold badges34 silver badges69 bronze badges2 Answers
Reset to default 7Font 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 pleted <i>
to <svg>
conversion.
function iconDoneRendering () {
console.log('Icons have rendered')
}
dom.i2svg({ callback: iconsDoneRendering })
As of version 5.7.0, this method also supports the Promise API:
dom.i2svg()
.then(function () {
console.log('Icons have rendered')
})
Source
If for some reason you are forced to use prepiled Font Awesome and cannot import the dom.i2svg() method, you can use this simple check instead:
function FontAwesomeLoaded() {
if(document.documentElement.classList.contains('fontawesome-i2svg-plete')) {
console.log('Icons have rendered')
}
else {
window.setTimeout(FontAwesomeLoaded, 100);
}
}
FontAwesomeLoaded();
It checks every 100ms until it finds 'fontawesome-i2svg-plete' class in html tag. The class is added by Font Awesome JS after it has finished loading all SVGs. It works for both Font Awesome 5 and 6.