引导工具提示不是默认的答案

【问题标题】：Bootstrap Tooltip not default引导工具提示不是默认的
【发布时间】：2014-08-21 21:17:28
【问题描述】：

<i></i> 图标上的工具提示，但样式很丑。

我想成为这张照片中的样子（默认Bootstrap）

<script>
$( document ).ready(function() {
    $('.mark-read-button').tooltip();
});
</script>

<i data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="fa fa-circle mark-read-button"></i>

【问题讨论】：

这里有一个提示：matooltip.com。我让它看起来更像 Twitter 的 Bootstrap，只是更好。
可能您的工具提示无法适应目标节点上方剩余空间的高度。
在 Bootstrap CSS 之后是否加载了 jQueryUI CSS？
@beyst 是的，我之前添加了，没有结果。
包含一个 jsfiddle 或类似的东西会很有用，所以我们可以查看是否有任何 CSS 可能覆盖默认的 Bootstrap 样式

标签： javascript html twitter-bootstrap tooltip

【解决方案1】：

尝试使用此代码，它使用 CDN 和 jumbotron 来阻止工具提示离开屏幕。

<!-- CDNs -->
<!-- JQuery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- Jumbotron is to stop the tooltip from going off of the screen. -->
<div class="jumbotron">
    <i data-toggle="tooltip" data-placement="top" title="Tooltip on top" class="fa fa-circle mark-read-button"></i>
</div>
<!-- The script cannot be inside another document -->
<script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

【讨论】：