Bootstrap工具提示没有正确设计？

Question

我在一个字体真棒图片中添加了一个自举工具提示。工具提示应该像它应该的那样出现，但在我看来它没有正确设计。这是我第一次使用BS工具提示，并根据我发现它应该有一个很好的风格的例子。

我使用LESS并导入了引导程序。当我查看编译好的CSS文件时，我可以看到工具提示样式。我也通过捆绑将bootstrap.js导入到页面中。我认为这是一个CSS问题而不是.js问题。

这是我的LESS文件顶部的代码，我在BS和font-awesome中导入。

@import "LESS/bootstrap/bootstrap";
@import "LESS/font-awesome/font-awesome";

这是我的bundle.cs文件。

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

以下是我编译的.css文件中工具提示的一些样式。这是从BS通过LESS complilation添加的。

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  letter-spacing: normal;
  line-break: auto;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  font-size: 14px;
  opacity: 0;
  filter: alpha(opacity=0);
}

这是我的剃刀观点。

<i class="fa fa-clock-o icon-2x clock-status-online" aria-hidden="true" data-toggle="tooltip" title="Clock Online"></i>

这是我的自定义CSS，用于设置字体真棒图像的样式。

.clock-status-online{
    color: forestgreen;
}

这是它看起来像的屏幕截图。左边的那个是我的工具提示，它只是一个基本的盒子。右边的那个是一篇示例文章，我的假设是这就是工具提示看起来应该是开箱即用的。