引导工具提示右移答案

【问题标题】：bootstrap tooltip shifted right引导工具提示右移
【发布时间】：2012-12-09 12:42:27
【问题描述】：

一切都很好，但在某一时刻工具提示变得疯狂。

http://jsfiddle.net/AJkJa/10/ 工具提示应该在文本附近，但它在右边框上。如果我设置小宽度，它将在文本的这个宽度上。

我做错了什么？

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script>
        $(document).ready(function () {
            $("[rel=tooltip]").tooltip();
        });
    </script>
</head>
<body>
<div rel="tooltip" data-original-title="tooltip" data-placement="right">hover me. tooltip should be here.but it's shifted right</div>
</body>
</html>

【问题讨论】：

标签： javascript html twitter-bootstrap tooltip

【解决方案1】：

工具提示不会“变得疯狂”！当你把它放在right 时，它会找到容器的末端，因为<div> 呈现为display:block，它会找到很远的末端。

一个简单的证明方法是给那个 div 一个background-color:red，你会看到发生了什么。

要让 hover me 获得悬停效果，请仅为其提供工具提示，例如：

<div>
  <span rel="tooltip" data-original-title="tooltip" data-placement="right">hover me</span>. 
  tooltip should be here.but it's shifted right
</div>

更新示例：http://jsfiddle.net/AJkJa/11/

【讨论】：

【解决方案2】：

div 扩展到whole available space。如果你给它一个合适的宽度或显示样式。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script>
        $(document).ready(function () {
            $("[rel=tooltip]").tooltip();
        });
    </script>
</head>
<body>
<div rel="tooltip" data-original-title="tooltip" style="width:350px;" data-placement="right">hover me. tooltip should be here.but it's shifted right</div>
</body>
</html>

【讨论】：