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と、コンテナの端が検出されます。これは、a が<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/

于 2012-12-09T12:50:56.400 に答える
0

div は、使用可能なスペース全体に拡張されます。width- または display-style を指定すると、それが収まります。

<!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 に答える