3

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/

gene b.
  • 10,512
  • 21
  • 115
  • 227
  • Are there any errors in the console? Can you include the entire document as well. – Adrift Jun 24 '19 at 14:36
  • There are no errors in the console, I added that to my OP for clarity. `tooltip(..)` executes without problems. – gene b. Jun 24 '19 at 14:41
  • @freedomn-m: `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. – gene b. Jun 24 '19 at 14:44
  • By the way @freedomn-m, `title` is in fact the to use Bootstrap Tooltips, see here: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php – gene b. Jun 24 '19 at 14:45
  • Yes, you have an issue - bootstrap tooltip not working - but you've asked about why it shows the `title=` tooltip. You might want to reword that part. As to why it's not working: there's no point showing us some code that works. It'll likely be a browser cache or access denied issue. Is there any other bootstrap functionality in your page, and it is working/not working? Can you add something? – freedomn-m Jun 24 '19 at 14:46
  • Actually, as I wrote above, `title` in this case is not a browser tooltip, but a Bootstrap 4 one, that's the way it's supposed to be used: https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php – gene b. Jun 24 '19 at 14:47
  • 1
    Good point about title, but if bootstrap isn't working then it will be displayed as the browser tooltip, which is what is happening – freedomn-m Jun 24 '19 at 14:48
  • Looks like ` ` makes it break. That was another include in my file. I'll add it to the OP. – gene b. Jun 24 '19 at 15:42
  • Any thoughts on why jQuery 1.12.1 makes it break? I've updated my question with examples. – gene b. Jun 24 '19 at 15:50
  • Ah, the ole switcheroo. That's a completely different question / issue, but glad you found your issue even if it had nothing to do with the original question. – freedomn-m Jun 26 '19 at 05:22

2 Answers2

5

Looks like the jQuery UI Tooltip & Bootstrap Tooltip collision is the issue, discussed here,

jQueryUI Tooltips are competing with Twitter Bootstrap

The solution is to link Bootstrap Bundle AFTER jQuery UI,

https://stackoverflow.com/a/26476505/1005607

gene b.
  • 10,512
  • 21
  • 115
  • 227
1

From my view, the better solution is to go to the jquery ui web site and build a distribution with only the UI components you want/need. I had the same issue and deselected the tooltip widgets, downloaded the resultant distribution and it solved my problem.

After spending some time trying to get the right order of JS files, this was a much simpler solution and not prone to breaking in the future.

Douglas Lindner
  • 21
  • 2