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>