Question

一切都很好，但在一瞬间工具提示变得疯狂。

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，你会看到发生了什么。

只有悬停我才能获得悬停效果，只提供工具提示，例如：

<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延伸到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>

bootstrap工具提示向右移动

2 个答案: