Hi @niwo. Thanks for the demo! Very helpful.
I took a look at your page. At the time I looked, it seemed like it was behaving as you expect. Or if not, the difference is so subtle it’s hard for me to tell whether it’s working as you expect.
I noticed something else, though, which might be a clue as to how enabling the Font Awesome plugin might impact these fade-in/fade-out animations. If so, it’s not about the plugin itself, but about how the core Font Awesome SVG library works (the plugin just adds that to your pages when you configure it to load Font Awesome with SVG technology).
Here’s a screenshot that shows that the fade-in/fade-out behavior on the hover/mouseover event is being done by a jQuery event handler bound to the <span> element that contains the icon (<i>) element.
It doesn’t seem like the following applies in this exact case, because that jQuery event handling is bound to the parent element, rather than the <i> element. And if this were the problem, I would expect the tooltip popup not to work at all, rather than just to fade-in too quickly. But I mention it because I wonder–if you’ve tried multiple attempts–if some of those attempts have happened to land on this combination. In any case, it’s something to watch out for when using Font Awesome SVG and jQuery together.
If you have Font Awesome configured to use SVG (instead of Web Fonts), and you put in the icon as an <i>, and you try to bind a JavaScript event handler to that <i>, then the event handler will disappear when the Font Awesome SVG library replaces that <i> element with the corresponding <svg> element.
This doc page explains more about that. It also suggests a workaround using data-auto-replace-svg=”nest”, but that’s not an easy configuration to add in WordPress. So it would be easier to just use Web Font technology, which is how it was configured at the time I looked. The other workaround I’d expect to work–if you’re using SVG–would be to do something like what your site already seems to be doing, which is to make sure that the jQuery event handler is bound to some element that’s not the <i>.
Since you’re both using Web Font, and the jQuery event handler is not bound to the <i> element, I don’t think this is causing you any problem. However, I offer it as a clue regarding possible interactions between DIVI tooltip behavior and Font Awesome with SVG technology. So if you observe other problems with those tooltips when using FA SVG, it may be helpful to take a look what’s happening with that jQuery event handler.
In the meantime, I’m not yet able to confirm that enabling Font Awesome plugin is causing a conflict with a DIVI feature. If you find any additional debugging information, I’ll take another look at it.
