1

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

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>​
4

2 回答 2

3

工具提示不会“变得疯狂”！当你放置它时，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>

updated example: http://jsfiddle.net/AJkJa/11/

于 2012-12-09T12:50:56.400 回答
0

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>
于 2012-12-09T12:50:31.300 回答