admin管理员组文章数量:1310004
How do I make the tooltip appear on top if there's not enough space at the bottom, and vice-versa? Is there any CSS hack or I have to calculate it using JS?
.foo {
position: relative;
}
.tooltip {
display: none;
}
.foo a:focus+.tooltip {
display: block;
background: black;
position: absolute;
color: white;
padding: 5px;
z-index: 1;
}<div class="foo"><a href="#" class="foo"> this is a link</a>
<div class="tooltip">this is a tooltip</div>
</div>
<div class="foo"><a href="#" class="link">this is a link</a>
<div class="tooltip">this is a tooltip</div>
</div>How do I make the tooltip appear on top if there's not enough space at the bottom, and vice-versa? Is there any CSS hack or I have to calculate it using JS?
.foo {
position: relative;
}
.tooltip {
display: none;
}
.foo a:focus+.tooltip {
display: block;
background: black;
position: absolute;
color: white;
padding: 5px;
z-index: 1;
}<div class="foo"><a href="#" class="foo"> this is a link</a>
<div class="tooltip">this is a tooltip</div>
</div>
<div class="foo"><a href="#" class="link">this is a link</a>
<div class="tooltip">this is a tooltip</div>
</div>4 Answers
Reset to default 1You must use js to calculate position of your element on page. in dynamic page your element will apperar in top, bottom, left ,right.
If link is present in 1st half of screen then add .tooltipTop else add .tooltipBottom class.
You can test by adding multiple link in code.
<!DOCTYPE html>
<html>
<head>
<title>Side Project</title>
<link href="https://fonts.googleapis./css?family=Nunito+Sans" rel="stylesheet">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
body{
height:auto;
}
.foo { position: relative;}
.tooltip {
position: absolute;
display: none;
background: black;
color: white;
padding: 5px;
z-index: 1;
}
.tooltipTop{
top: 20px;
display: block;
}
.tooltipBottom{
top: -25px;
display: block;
}
</style>
<body>
<div class="foo"><a href="#" class="link"> this is a link1</a>
<div class="tooltip">this is a tooltip1</div>
</div>
<br>
<br>
<div class="foo"><a href="#" class="link">this is a link2</a>
<div class="tooltip">this is a tooltip2</div>
</div>
<div class="foo"><a href="#" class="link"> this is a link3</a>
<div class="tooltip">this is a tooltip3</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="foo"><a href="#" class="link">this is a link4</a>
<div class="tooltip">this is a tooltip4</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".foo").click(function(){
var bodyheight = $("body").height();
var halfbodyheight = bodyheight/2;
var parent = $(this).parent();
var position = $(this).position().top;
if(position >= halfbodyheight){
$(".tooltip").removeClass("tooltipBottom tooltipTop");
$(this).find('.tooltip').addClass("tooltipBottom");
}
else{
$(".tooltip").removeClass("tooltipBottom tooltipTop");
$(this).find('.tooltip').addClass("tooltipTop");
}
});
});
</script>
</html>well you can try this. It may help you.
CSS
.foo {
position: relative;
}
.tooltip {
display: none;
}
.foo a:focus+.tooltip {
display: block;
background: black;
position: absolute;
color: white;
padding: 5px;
z-index: 1;
}
Javascript
$("#tt").css({ top: $("#ll").position().top - 30 });
HTML
<br>
<br>
<div class="foo"><a href="#" class="foo" id="ll"> this is a link</a>
<div class="tooltip" id="tt">this is a tooltip</div>
</div>
Unfortunately you can not it through CSS dynamically. You can always create a class and add it manually to the elements at bottom. But if you want a dynamic behavior, you need help of JS to determine space availability.
You can use bootstrap tooltip. If not below code can be helpful.
.foo {
position: relative;
}
.tooltip {
display: none;
}
.foo a:focus+.tooltip {
display: block;
background: black;
position: absolute;
color: white;
padding: 5px;
z-index: 1;
}
.foo a:focus+.tooltip.top {
top: -1.5em;
}
.foo a:focus+.tooltip.bottom {
top: 1em;
}<div class="foo"><a href="#" class="foo"> this is a link</a>
<div class="tooltip top">this is a tooltip</div>
</div>
<div class="foo"><a href="#" class="link">this is a link</a>
<div class="tooltip bottom">this is a tooltip</div>
</div>本文标签： javascriptHow to change the Tooltip position based on available spaceStack Overflow
版权声明：本文标题：javascript - How to change the Tooltip position based on available space - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741839507a2400413.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论