This issue was solved following the solution by @serghost found in link below using a wrapper for the tag instead using it with in same tag.
https://github.com/FortAwesome/Font-Awesome/issues/11902
<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>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>