[英]bootstrap tooltip shifted right
一切都很好,但在一瞬间工具提示变得疯狂。
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>
工具提示并没有“变得疯狂”! 当你把它放在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/
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.