jQueryUI Tooltips are competing with Twitter Bootstrap

Question

Both jQuery UI and Bootstrap use tooltip for the name of the plugin. Use $.widget.bridge to create a different name for the jQuery UI version and allow the Bootstrap plugin to stay named tooltip (trying to use the noConflict option on the Bootstrap widget just result in a lot of errors because it does not work properly; that issue has been reported here):

$.widget.bridge('uitooltip', $.ui.tooltip);

So the code to make it work:

<!-- Import jQuery and jQuery UI first -->
<script src="/js/jquery-ui.js"></script>
<script src="/js/jquery-ui.js"></script>

<script>
  // Resolve name collision between jQuery UI and Twitter Bootstrap
  $.widget.bridge('uitooltip', $.ui.tooltip);
</script>

<!-- Then import Bootstrap -->    
<script src="js/bootstrap.js"></script>

JQuery tooltips can then be instantiated in the following way:

$('.someclass').uitooltip();

Nice copy paste code that also handles the button conflict:

<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.js"></script>

<script>
  $.widget.bridge('uibutton', $.ui.button);
  $.widget.bridge('uitooltip', $.ui.tooltip);
</script>

<script src="/js/bootstrap.js"></script>

Leave a Comment Cancel reply