How to keep a CSS 'tool-tip' div from going off screen to the right

I am writing an ASP 'document server' to list (details and icons, like in Windows Explorer) and display current and historical documents in a database.
I found a great looking CSS 'tool tip', but while displaying a list of icons, if one at the right side of the screen is hovered, the div goes off the screen to the right, like this:
Example of CSS tool tip displaying off screen
otherwise, it works absolutely flawlessly, and I really like it.

By the way... I am not using any react code or media queries.

Here is CSS code, slightly modified from the original post I found.

a {
    text-decoration: none;
}
a.tip {
    position: relative;
}
a.tip div {
    display: none;
}
a.tip:hover div {
    display: block;
    width: 350px;
    position: absolute;
    left: 50px;
    top: 35px;
    border: 1px solid black;
    border-radius: 10px;
    padding: 5px 10px;
    box-shadow: 5px 5px 5px gray;
    text-align: justify;
    text-justify: auto;
    z-index: 999999;
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f8f8f8),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #f8f8f8, #cccccc);
    background-image: -moz-linear-gradient(top, #f8f8f8, #cccccc);
    background-image: -ms-linear-gradient(top, #f8f8f8, #cccccc);
    background-image: -o-linear-gradient(top, #f8f8f8, #cccccc);
}

and this is the ASP code used to generate the entire icon:

    <div class="clist2" style="display:inline-block; padding:10px 10px 10px 10px; margin:3px; border-radius:10px; cursor:pointer; background-color:lightblue; color:black;"
            onMouseOver="savColor=this.style.backgroundColor;this.style.backgroundColor='#E0FFFF';"
            onMouseOut="this.style.backgroundColor=savColor;" onClick="<%=link%>">
        <a href="#"<%=iif(len(rsd("Description")&"")=0,""," class=""tip""")%>>
            <img style="border:1px solid black; border-radius:5px; margin:5px;"
                src="<%=iif(len(""&rsd("Icon"))>0,"/Documents/"&rsd("dtPath")&rsd("Icon"),"/Images/Icons/"&iif(len(""&rsd("dtDefIcon"))>0,rsd("dtDefIcon"),"_document_.png"))%>" />
            <div><%=rsd("Description")%></div>
        </a>
        <br>
<%
                if rsd("dtPub") = "Y" or rsd("dtBook") = "Y" then
                    if len(rsd("Volume") & "") > 0 and len(rsd("Issue") & "") > 0 then
                        if rsd("Volume") > 0 and rsd("Issue") > 0 then
%>
        Vol <%=iif(rsd("Volume")>0,rsd("Volume"),"---")%>, Issue <%=iif(rsd("Issue")>0,rsd("Issue"),"---")%><br />
<%
                        end if
                    end if
%>
        <%=iif(rsd("Year")>1,rsd("MonthName")&"&nbsp;"&rsd("Year"),"")%>
<%
                else    'if rsd("dtAlbum") = "Y" then
%>
        <%=rsd("Name")%>
<%
                end if
%>
    </div>

Most of this ASP code is irrelevant, but I'm presenting it in anticipation of someone asking for it. The CSS class is applied to the tag above, and the tool tip text is in the div under the img tag.

I have no idea what to try. CSS is not my forte'. I think I could turn the left:50px into a right: somehow perhaps using a max() function, but I've no idea how. My ideal solution would be to put the div at left:50px, as it's currently coded in the CSS below, UNLESS the right side if pushed off the screen, in which case the right side of the div should sit AT the right side of the screen, taking the left side of the div enough left for it to fit. But this is WAAAY above my paygrade lol, and I've no idea how to code it. Any help appreciated...