CODEWITHSUNDEEP
javascriptjqueryhtmldomtooltip
Juke
Juke

Reputation: 1436

HTML doubles up the tooltip in chrome

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 twiceenter image description here

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.

Upvotes: 0

Views: 406

Answers (1)

Juke
Juke

Reputation: 1436

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]' }); 
        } 
    });

Upvotes: 1

Related Questions