引导工具提示右移 [英] bootstrap tooltip shifted right
问题描述
一切都很好，但一瞬间工具提示变得疯狂.
http://jsfiddle.net/AJkJa/10/ 工具提示应该靠近文本，但它在右边界.如果我设置小宽度，它将在文本的这个宽度上.
我做错了什么?
<头><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"><脚本>$(document).ready(function () {$("[rel=tooltip]").tooltip();});<身体><div rel="tooltip" data-original-title="tooltip" data-placement="right">悬停我.工具提示应该在这里.但它右移了</div></html>工具提示不会变得疯狂"！当您将它right 放置时，它将找到容器的末尾，并且因为
display:block 它会找到尽头很远.一个简单的方法来证明它是给那个 div 一个 background-color:red 的，你会看到发生了什么.
要让 hover me 获得悬停效果，请仅为其提供工具提示，例如:
<span rel="tooltip" data-original-title="tooltip" data-placement="right">悬停在我身上</span>.工具提示应该在这里.但它向右移动更新示例:http://jsfiddle.net/AJkJa/11/
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>
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/
这篇关于引导工具提示右移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
