In my application which is built in Oracle APEX 5 I have a pl/sql dynamic content which has a tooltip.
The tooltip gets hidden (it basically gets overlapped by the next region) if it is in the bottom row since the regions ends there. Please help me with the solution.
Below is the link which has a sample application with similar issue in page 2. Please hover on the bottom row "Hersteller / Lieferant" text which shows the hidden tooltip
https://apex.oracle.com/pls/apex/f?p=98024:2
Username: girishrrao014@gmail.com
password: reset123
Page no: 2
The css which i have used is as below on page load
.tooltip {
position: relative;
z-index: 1;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: black;
width: 300px;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
left: 45%;
}
/*
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip
}
*/
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}