css - Bootstrap Tooltip 默认样式不对？

Question

我正在 Bootstrap 中尝试一个非常简单的工具提示集成，但得到了一些奇怪的结果:

<script type="text/javascript">
$(document).ready(function(){           
    $("[data-toggle=tooltip]").tooltip();

});
</script>

<select title="Tooltip on top" data-placement="top" data-toggle="tooltip" id="purchaseddate1-day" name="purchaseddate1-day" class="form-control"><option value="">All</option><option value="1">1</option></select>

工具提示占屏幕宽度的 100%，背景为灰色，位于元素上方。为什么它不像指定的那样小巧、光滑、黑色和以上？

我包含了标准的 js 和 css:

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
<link href="/css/bootstrap.min.css" rel="stylesheet">   

Answer 1

“有时需要将 Bootstrap 插件与其他 UI 框架一起使用。在这些情况下，命名空间冲突偶尔会发生。如果发生这种情况，您可以在要还原的插件上调用 .noConflict的值(value)。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

”

来自 bootstrap docs