How to disable native browser tooltip with bootstrap4 tooltip

Question

The following code shows both the bootstrap tooltip and the native title-attribute tooltip:

This is my text. 
<i class="far fa-question-circle" data-toggle="tooltip" title="This is my tooltip."></i> 
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Fiddle

How can I not show the native title-attribute of Fontawesome 5's icon-svg, so only the Bootstrap-tooltip is shown?

Answer 1

You can try following HTML

This is my text. <i class="far fa-question-circle" data-toggle="tooltip" data-title="This is my tooltip."></i> 

Since the default nature of browser is difficult to override and may cause unexpected behavior we can choose alternative way to solve the issue

The Bootstrap 4 tool-tip can also show tool tip if the attribute is prefixed with data . so you can replace title attribute with data-title

Here is a working fiddle

https://jsfiddle.net/samuelj90/qfcs9azv/18/

Answer 2

I had issues with the data-title from the answers above, instead I had to use the data-original-title . You can set this property using the attr function from jQuery or directly into the DOM.

HTML:

This is my text. 
<i class="far fa-question-circle" data-toggle="tooltip"></i> 

JavaScript:

$(function () {
    //Initialize the Bootstrap tooltip
    $('[data-toggle="tooltip"]').tooltip();

    //Force the Tooltip title change at run time
    $('.fa-question-circle').attr('data-original-title', "This is my tooltip.");
})

Fiddle

Answer 3

You can achieve by title attribute so don't use directly data-title or data-original-title attribute because of if we are targeting SEO friendly page then need to write well title text. So This is not Bootstrap4 tooltip issue so the main reason is that when created svg tag by fontawesome script for icon then its wrapping title="hello" attribute to <title>hello<title> tag inside svg tag.
So we can remove title tag by show.bs.tooltip event.

Doc: https://getbootstrap.com/docs/4.4/components/tooltips/#events

 $(function () { $('[data-toggle="tooltip"]').tooltip(); }); $(function () { $('[data-toggle="tooltip"]').on('show.bs.tooltip', function (e) { //Remove title tag from inside created svg tag $(this).find('title').remove(); }); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> <div class="container py-4"> <div class="row"> <div class="col-sm-4"> This is my text. <i class="far fa-question-circle" data-toggle="tooltip" title="This is my tooltip."></i> </div> </div> </div>