bootstrap tooltip shifted right

问题

All was nice, but in one moment tooltips become crazy.

http://jsfiddle.net/AJkJa/10/ tooltip should be near of text, but it's on right border. if i set small width, it's will be on this width from text.

what i'm doing wrong?

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

回答1:

Tooltip does not "became crazy"! When you place it right it will find the end of the container, and because a <div> renders as display:block it will find the end far away.

A Simple way to prove it is given a background-color:red to that div and you will see what's going on.

To have only the hover me getting the hover effect, give the tooltip only to it, like:

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

回答2:

The div extends to the whole available space. If you give a width-, or a display-style it fits.

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

来源：https://stackoverflow.com/questions/13787454/bootstrap-tooltip-shifted-right

标签

javascript

html

twitter-bootstrap

tooltip