I have a strange case where including jQuery UI 1.12.1 breaks my Bootstrap 4.3.0 tooltip.
See below: this tooltip
<i class="fas fa-question-circle" rel="tooltip" data-placement="right"
data-original-title="My tooltip"></i>
with the initialization $("[rel=tooltip]").tooltip({html:true});
works without the jQuery UI 1.12.1 inclusion, but breaks with it.
NOTE No errors on the console. tooltip() is being executed successfully without problems.
Comment out the jQuery UI 1.12.1 include and see for yourself!
$("[rel=tooltip]").tooltip({html:true});
.fa-question-circle:before {
content: "\f059";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
<!-- THIS LINE MAKES IT BREAK! INCLUDING jQUERY UI 1.12.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<i class="fas fa-question-circle" rel="tooltip" data-placement="right" data-original-title="My tooltip"></i>
Or, the following fiddle: doesn't work initially, but remove the jQuery UI 1.12.1 include, and it'll start working: https://jsfiddle.net/21v4zh3u/
tooltip(..)
executes without problems.data-original-title
did not work for the tooltip. It should have worked, and it didn't. I get your point about browser tooltips, so the issue is that Bootstap Tooltips isn't being connected properly.title
is in fact the to use Bootstrap Tooltips, see here: tutorialrepublic.com/twitter-bootstrap-tutorial/…