Question

如果将jQuery UI与Twitter引导程序结合使用，则工具提示不再适用。

$('[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>

我添加jQuery UI的唯一原因是可拖动功能。也许我应该尝试使用HTML5。

Answer 1

在twitter bootstrap之前添加jquery，jquery-ui

<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>

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

如果它仍然不起作用，可能是由于命名冲突。然后先导入jquery，jquery ui。然后添加

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

然后导入bootstrap

添加jQuery UI时，Twitter Bootstrap工具提示会改变外观

1 个答案: