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;
$('element').bstooltip();

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

$.fn.bstooltip = bootstrapTooltip;

$('element').bstooltip();

with an example

<html>
<head>
 <title>Solve tooltip conflict</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 <div style="margin:100px;" >
 <button id="mybtn" title="my tooltip showing now">hover me</button>
 </div>
 <script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
 <script type="text/javascript">
 $(document).ready( function () 
 {
 var bootstrapTooltip = $.fn.tooltip.noConflict();
 $.fn.bstooltip = bootstrapTooltip;
 $('#mybtn').bstooltip();
 })
 </script>
</body>
</html>

<html>

<head>

<title>Solve tooltip conflict</title>

</head>

<body>

<button id="mybtn" title="my tooltip showing now">hover me</button>

</div>

$(document).ready( function ()

{

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

$.fn.bstooltip = bootstrapTooltip;

$('#mybtn').bstooltip();

})

</script>

</body>

</html>

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