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/