HTML doubles up the tooltip in chrome

Question

I am working on tooltips with different browsers. Using font awesome plugin hence it converts <i> to <svg> for this reason <title> tag tooltip is not working on IE. so I have used jquery $("body").tooltip({ selector: '[data-toggle=tooltip]' }); this is working as expected in IE but in chrome its showing twice

If I remove title tooltip is completely not showing up so I thought to remove child attribute attribute in html.

Formatted HTML:

    <svg class="svg-inline--fa fa-edit fa-w-18 actionButton" name="enter" id="10_0" aria-label="Edit" data-toggle="tooltip" title="Edit" onclick="performActionGrant(10,2018097)" accesskey="E" aria-labelledby="svg-inline--fa-title-Kwz2lgOjl6OC" data-prefix="far" data-icon="edit" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
       <title id="svg-inline--fa-title-Kwz2lgOjl6OC">Edit</title>
       <path fill="currentColor" d="M402.3 "></path>
    </svg>

wanted to remove title tag with id which equals svg aria-labelledby id. I have tried mutiple ways but not able to do with DOM or jquery.

Try detecting if the user is using IE and then run your code if they are: https://stackoverflow.com/questions/19999388/check-if-user-is-using-ie It may not be the best way to achieve this, but since IE has been superseded I wouldn't worry too much IMO — Lee Taylor, Aug 15 '19 at 16:22
hmm. i guess i would try removing the title once you have the tooltips upgraded. `$("[title]").map((i,e)=>e.removeAttribute("title"));` — dandavis, Aug 15 '19 at 16:22
@LeeTaylor Its possible with it but its not a good practice I believe — Juke, Aug 15 '19 at 16:27
@Juke. Maybe not best practice, but at least you have a back up plan if nothing else works. Sometimes you have to weigh these things up. Especially since IE won't be about in the near future, or at least not supported... — Lee Taylor, Aug 15 '19 at 16:28
@LeeTaylor ya I will put that as backup plan but can we do anything with css and jquery — Juke, Aug 15 '19 at 16:29
@Juke Please amend your question to show the html that "doubles up" the tooltips. This will make it easier for people to attempt to answer. — Lee Taylor, Aug 15 '19 at 16:33
@Juke - As in a runnable demo. Please expand the code snippet to get it to work. — Lee Taylor, Aug 15 '19 at 16:36

score 1 · Answer 1 · answered Aug 15 '19 at 20:08

I have used browser to detect and put condition to get in

var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE");
        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) 
        {  
        $("body").tooltip({ selector: '[data-toggle=tooltip]' }); 
        } 
    });

HTML doubles up the tooltip in chrome

1 Answers1