Twitter Bootstrap Question posted in

Bootstrap 4.3.0 Tooltip Conflicts with jQuery UI 1.12.1-Twitter bootstrap

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/

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search