html – Cannot use to set popup location for smartphonel need another solution

I have 35 mouse over text links that open images in a long story, so I can’t use a <div> to set off each one. Here is a sample sentence:

The life of James “Jim” Grady Caudle began on April 10, 1933. By all accounts his birth took place in a <a onmouseover="nhpup.popup('House where Jim was born and grew up on Pegram Street, Charlotte, NC<br/><img src=&quot;/images/home.jpg&quot;/>', {'width': 373});">small house</a> in the Belmont Section of North Charlotte, NC, on Pegram Street.

That nhpup.popup is this:

#pup {
position:absolute;
z-index:999; /* aaaalways on top*/
padding: 3px;
margin-left: 10px;
margin-top: 5px;
width: 600px;
border: 1px dashed grey;
background-color: #777;
color: white;
font-size: 0.95em;
cursor: default;
}

The page works great on a desktop or laptop but on a smartphone, a tap causes the link to open the image at the very bottom of the page. Obviously not what I need. I’d love to somehow use position:origin either in a script or CSS if that’s possible so that it would open at the link.

Here’s the page:
https://www.coachcaudlecares.org/llltest.html.

I’ve researched this for hours (days) and tried multiple solutions. Please can someone help? Thank you!