Font-awesome: FontAwesome 5 Tooltipster incompatibility issue

Created on 11 Dec 2017 · 9Comments · Source: FortAwesome/Font-Awesome

Hi,

I'm implementing FA5 in our site and I have a problem with Tooltipster functionality. I have choose SVG implement method. In many icons I have something like this:

<i class="fas fa-exclamation-triangle tooltip" Title="Help text"></i>

Tooltip functionality (Tooltipster JS) works very well in FA4, but now, in FA5 it doesn't. In some cases I can with a strong effort move tooltip class to previous html.

Any idea for fix this?
Do you will fix in a near future update?

Thank you very much for your great work.

question

Source

djkeltxo

Most helpful comment

However you can workaround it by using a wrapper:

<div class="icon-with-tooltip tooltip" Title="Help text">
  <i class="fas fa-exclamation-triangle"></i>
</div>

serghost on 3 Jun 2018

👍2

All 9 comments

Hello,

Additional information about this issue.

In SVG implementation, javascript code removes 'Title' from i tag.

Thank you for your support.

djkeltxo on 12 Dec 2017

The same problem is at https://github.com/FortAwesome/Font-Awesome/issues/11966.
I put it for reference.
I hope it will be solved ASAP.
Thank you very much.

djkeltxo on 21 Mar 2018

👍1

@djkeltxo since the <i> tag is replaced with <svg> I'm not sure what would help you out here. You might consider switching to web fonts if you need a more compatible upgrade to FA5.

Also if you could provide a test case (reproduction) using codepen.io, jsbin.com, jsfiddle.net or similar that would help me understand exactly what you are dealing with.

robmadole on 21 Mar 2018

👍1

Hi,
My problem is explained in this and referenced issue. As @andrezgz mention, SVG implementation removes 'title' tag from <i> tag, so functionalities like Tooltipster don't work. I can't switch to web fonts because I need special features that SVG offer.
I hope that you solve this behaviour problem in a future FontAwesome update.
Thank you very much.

djkeltxo on 23 Mar 2018

👍1

Sorry, @djkeltxo I'm just not smellin' what your cookin'. Can you create a reproducible test case using something like codepen.io?

robmadole on 23 Mar 2018

👎1

We'll re-open this issue as soon as you can provide this (we close them to keep the issues queue as manageable as possible).

robmadole on 23 Mar 2018

👎1

jQuery tooltips do not work with font awesome 5 svg/js implementation

petraeus on 18 Apr 2018

❤2

However you can workaround it by using a wrapper:

<div class="icon-with-tooltip tooltip" Title="Help text">
  <i class="fas fa-exclamation-triangle"></i>
</div>

serghost on 3 Jun 2018

👍2

However you can workaround it by using a wrapper:
<div class="icon-with-tooltip tooltip" Title="Help text">
  <i class="fas fa-exclamation-triangle"></i>
</div>
I faced issue of getting two tooltips instead of one while using FontAwesome 5 as It will create additional SVG tag with bootstrap tooltip. I even disable the tooltip everywhere for bootstrap tooltip but still I was getting undesired tooltip.

Issue can be reproduced with following code

<span                
           class="fa fa-question-circle"
           data-toggle="tooltip"
           data-placement="right"
           title="Some Title"
           data-tt-head="Some Header"
           data-tt-footer="<a style='opacity: 70%' target='_blank' href=''>Read More ... 
</a>" >
</span>

And the issue was solved following the solution by @serghost using a wrapper

<span                
           data-toggle="tooltip"
           data-placement="right"
           title="Some Title"
           data-tt-head="Some Header"
           data-tt-footer="<a style='opacity: 70%' target='_blank' href=''>Read More ... 
</a>" >
     <i class="fa fa-question-circle"></i>
</span>