bootstrap工具提示向右移動
[英]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>
2 個解決方案
解決方案1
3 已采納 2012-12-09 12:50:56
工具提示並沒有“變得瘋狂”！ 當你把它放在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/
解決方案2
0 2012-12-09 12:50:31
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>
Bootstrap工具提示將右側內容推開
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.