Problem Solve Tooltip AdminLTE Bootstrap Framework Conflict With Jquery UI

For those using the AdminLTE bootstrap framework having problems at the tooltip that can not perform perfectly. According to several forums, the problem arises because of the conflict between bootstrap framework with jquery UI. Actually, the issue has been resolved by some forum by adding a few lines of code in javascript. Here’s how to resolve the conflict between bootstrap tooltip with jquery UI.

The causes of conflict on the jquery UI tooltip and the bootstrap tooltip are jQuery UI tooltip overwrite the Bootstrap tooltip maybe they use the same namespace and function name. Add the following code in your javascript

var bootstrapTooltip = $.fn.tooltip.noConflict();
$.fn.bstooltip = bootstrapTooltip;

with an example

 <title>Solve tooltip conflict</title>
 <link href="" rel="stylesheet">
 <div style="margin:100px;" >
 <button id="mybtn" title="my tooltip showing now">hover me</button>
 <script src="" ></script>
 <script src=""></script>
 <script src="" ></script>
 <script type="text/javascript">
 $(document).ready( function () 
 var bootstrapTooltip = $.fn.tooltip.noConflict();
 $.fn.bstooltip = bootstrapTooltip;

Problem Solve Tooltip Adminlte Bootstrap Framework Conflict With Jquery Ui

That need attention is that we must put the jqueryui.js before bootstrap.js and should not be overturned because the script will not work well, as shown below

Bootstrap Tooltips And Jquery Ui Confict

Another article about AdminLTE here

Thus my short article about Problem Solve Tooltip AdminLTE Bootstrap Framework Conflict With Jquery UI may be useful.

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.