Keep tooltip in visible part of the page - css

Question

I have an angular app, where I implemented a simple tooltip that can be more than just text, but is a div that can contain anything:
.tooltip-master {
position: relative;
.tooltip-slave {
visibility: collapse;
position: absolute;
top: 80%;
left: 80%;
}
}
.tooltip-master:hover {
.tooltip-slave {
visibility: visible;
}
}
<div class="tooltip-master">
<div>Element content</div>
<div class="tooltip-slave">Tooltip content</div>
</div>
So whenever someone hovers over the element the tooltip is shown on the right bottom of the element. This works just fine. However for elements on the bottom of the page the tooltip is now mostly outside of the page and so not visible any more.
What I want to achieve is to move the tooltip upward when it would not be shown on the page completely anymore. I'd prefer a solution with pure CSS. Any suggestions?

Answer 1

Its difficult to say without more detail... as you are using top: 80% and left: 80% for a reason I guess.. and you may struggle with a css only solution
So I'd just use ngx bootstrap ... https://valor-software.com/ngx-bootstrap/#/tooltip which will place the tooltip automatically on the default setting ...
unless you have a specific reason for wanting to do it your way of course... in that case have a look and see how they do it

Answer 2

The solution I finally came up with unfortunately doesn't work with plain CSS, but it works.
Depending on whether the tooltip should be shown above or below, the accoriding class tooltip-slave-above or tooltip-slave-below needs to be set additionally:
.tooltip-master {
position: relative;
.tooltip-slave {
visibility: collapse;
position: absolute;
left: 80%;
z-index: 200;
}
.tooltip-slave-below {
top: 80%;
}
.tooltip-slave-above {
bottom: 80%;
}
}
.tooltip-master:hover {
.tooltip-slave {
visibility: visible;
}
}
The master div now listens to the mouseenter event and the tooltip classes are set according to the bound property setTooltipBelow:
<div class="tooltip-master" (mouseenter)="tooltipMasterEnter($event)">
<div>Element content</div>
<div [ngClass]="{
'tooltip-slave': true,
'tooltip-slave-below': setTooltipBelow,
'tooltip-slave-above': !setTooltipBelow
}">Tooltip content</div>
</div>
This property is set in a pretty simpl way:
public tooltipMasterEnter(e: MouseEvent) {
const hBelow = e.view.innerHeight - e.y;
const hAbove = e.view.innerHeight - hBelow;
this.setTooltipBelow = hBelow > hAbove;
}