引导提示右移(bootstrap tooltip shifted right)

一切都不错，但在一个时刻提示变得疯狂。

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>

Answer 1:

工具提示不“成了疯狂”！当你把它right它会找到容器的结束，因为<div>呈现为display:block会找到它的结束不远了。

一个简单的方法来证明它被赋予一个background-color:red到该分区，你会看到发生了什么事情。

要只我得到悬停效果悬停，给予提示只给它，如：

<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/

Answer 2:

该DIV延伸到整个可用空间。如果你给一个宽度 - ，或它适合的显示风格。

<!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>

文章来源: bootstrap tooltip shifted right