HTML & CSS Tooltip Keeping On Screen

Question

I need help keeping my CSS tooltip on screen for my website. It unfortunately is too big for the website near the edge of the screen and also is WAY too big for any mobile device and doesn't position correctly (probably because I plan to add very large descriptions in each tooltip). I would like to just use CSS but would be willing to use JS as I'm starting to think that may be the only way to do it correctly, but I'm having a lot of trouble figuring out how to make it work.

I basically had copied over the code from another website with many tweaks if it helps you understand my code better: https://www.w3schools.com/css/css_tooltip.asp

The only results I could find online were about centering the tooltip on the screen which strangely didn't work and code using SCSS which I'm not experienced with and would prefer not to use.

Here is my partial HTML and CSS code:

body {
    overflow-x: hidden;
    overflow-y: scroll;
}

.ref {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.ref .versekjv {
    visibility: hidden;
    width: 250px;
    background-color: black;
    color: #fff;
    text-align: left;
    padding: 5px;
    border-radius: 6px;
    z-index: 98;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -125px;
    flex-direction: column;
}
.ref .versekjv::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.ref:hover .versekjv {
    visibility: visible;
}

.redletters {
    color:red; 
}

@media screen and (max-width:1000px){ 
   .ref .versekjv {
    font-size: 1rem;
    max-width: 20rem;
    position: fixed;
    bottom: auto; top: 13%;
    left: 78%;
    text-align: left;
    transform: translate(-50%);
    transform: translateX(-50%);
    white-space: normal;
    z-index: 98;
   }

   .ref .versekjv::after {
       border-color: transparent;
   }
}

<li class="box"><a>
                <div class="innerbox">Reference</div>

                <div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u></div>
                
                <div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u>; <u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>Verse Num.</i> Verse Text</p></span></u></div>
</a></li>

Thank you so much for your help!

Have you tried making the tooltip width relative to the viewport width rather than defined in term of rems (which can be huge if the user has set them apart from anything else and may have no relation with the viewport dimensions)? — A Haworth
– A Haworth, Commented Aug 19, 2021 at 6:03
I did experiment with tooltip width based on viewport width and it didn't work as I expected. The text gets too squished on smaller screens and doesn't allow for easy reading. It also still goes off the screen/webpage if it's too close to the edge of the screen. — Jared
– Jared, Commented Aug 19, 2021 at 6:13

Erfan · Accepted Answer · 2021-08-19 10:02:36Z

1

First, you need to get the DOM object of your tooltip,

let tooltip = document.querySelector(".ref .versekjv")

Then, you can use the js method "getBoundingClientRect", which gives you an object that has top, right, left and bottom fields which give you the distances of your element from top, right, left and bottom of the viewport. If your element is fully visible inside the element, all four fields would be positive numbers, otherwise it means it's partly invisible, for example a left field of "-10" means about 10px of length of your elements is beyond the left edge of the viewport.

What you can do is that you always check the top, left, ... distances of your element, and if they are negative numbers, manually change them and thus position your element correctly, which could be achieved like this:

tooltip.style.left = 20

edited Aug 19, 2021 at 10:02

answered Aug 19, 2021 at 8:08

Erfan

1,8121 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML & CSS Tooltip Keeping On Screen

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related