jQueryUI Tooltips are competing with Twitter Bootstrap
jquery-ui, twitter-bootstrap
Solution
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.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>
Problem
I have been able to get some tool tips to work finally with the following code: ``` <a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a> ``` and then ``` <script> $('[rel=tooltip]').tooltip(); </script> ``` The problem I'm running into is that it is using jQueryUI tooltips (no arrows, big ugly tooltips) instead of Bootstraps. What do I need to do to make use of the Bootstrap Tooltips instead of jQueryUI?