I have a problem with tooltip when using an absolute positition.

Here is my code :

.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: #f2f2f2;
    color: #444444;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 6.4px 14.4px 0 rgb(0 0 0 / 13%), 0 1.2px 3.6px 0 rgb(0 0 0 / 11%);
    font-weight: 500;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -125px;
    z-index: 1;

However, if the text is on the right side or left side of the screen, it just goes off screen or on mobile it is adding a vertical scrolling to the whole page.

r/webdev - Tooltip issue with position absolute

Do you know how I can make it not going across the page border, so if it’s too large, just to move it on the right/left side?

Thank you

Source link

Write A Comment