Question

我的页面上有一些工具提示，创建为：

<th rel="tooltip" data-toggle="tooltip" title="Text to show in tooltip">Change to date</th>

$("[data-toggle=\"tooltip\"]").tooltip();

这应该显示经典的黑色引导工具提示。但是，它显示了一个不同的工具提示。当我检查tooltip元素时，我看到它的所有样式都是从jquery-ui.css派生的，但是不应该这样，因为在Bootstrap之前加载了jQuery UI：

<!-- jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Theme Styles -->
<link href="/valera/assets/css/bootstrap.css" rel="stylesheet">
<link href="/valera/assets/css/bootstrap-responsive.css" rel="stylesheet">

任何人都知道为什么会这样？

Answer 1

因为JQueryUI有一些CSS选择器可以覆盖Bootstrap中的那些选择器。您需要在CSS中覆盖它，以确保它取消JQueryUI中的规则。如果您需要更多帮助，可以发布指向小提琴或编码的链接。

在Bootstrap之前加载了jQuery UI，但是仍然覆盖了Bootstrap样式？

1 个答案: