In my Angular application, I have successfully implemented a versatile tooltip feature that goes beyond just displaying text. The tooltip is a div element that has the ability to contain various contents:
.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>Content within element</div>
<div class="tooltip-slave">Tooltip content here</div>
</div>
Everything functions as intended when hovering over an element, with the tooltip appearing at the bottom right. However, for elements positioned near the bottom of the page, the tooltip extends beyond the viewable area and becomes inaccessible.
I am now seeking a solution that will automatically move the tooltip upward if it risks going off-screen. Ideally, I would like to achieve this using only CSS. Are there any recommendations or suggestions for achieving this behavior?