CODEWITHSUNDEEP
twitter-bootstrapjquery-uitooltip
Phillip Senn
Phillip Senn

Reputation: 47605

Twitter Bootstrap tooltip changes look when adding jQuery UI

If you combine jQuery UI with Twitter bootstrap, the tooltip doesn't look right any longer.

$('[data-toggle="tooltip"]').tooltip()
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.css">
<div data-toggle="tooltip" data-placement="bottom" title="Hello World!">Hover over me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js"></script>

The only reason I'm adding jQuery UI is for the draggable feature. Maybe I should try using HTML5 instead.

Upvotes: 0

Views: 385

Answers (1)

Subhashini
Subhashini

Reputation: 114

Add jquery, jquery-ui together before twitter bootstrap

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>

Sample [link] http://plnkr.co/edit/PNzWHN6MSvNjxHSw0EbF?p=preview

if its still not working, it might be due to the naming conflict. then import jquery, jquery ui first. then add 

<script>
// Change JQueryUI plugin names to fix name collision with Bootstrap.
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>

then import bootstrap

Upvotes: 1

Related Questions