Image bubble when hovering over an image

I'm sorry for this late and brief response.

I am on the road at the moment and not always connected.

So I would say that like many folks on this exchange, I'm not in favor of such an interaction process... Plus, I will  add that hovering often occludes mobile devices, not to mention that content obtained through CSS or Javascript, often gets lost in screen readers (unless ARIA adhoc states & properties are cleverly used)... but that's another debate...

So to modify the CSS version actually used, and therefore without having to touch your current HTML, in a heavy way... the trick is just to use the URL of the image to display in the content property, something like :

selector {
   content:url("http:/mypicture.png");
}

Now, in order to pass this value in an elegant way, I propose to use a CSS variable dropped in the style attribute of the concerned encapsulating tag...

For example, in the HTML content (taking into account the previous scripts, presented in the original thread)

<span class="csstooltip" title="" data-title="The text to be displayed" style="--img : url('https://via.placeholder.com/85x28')">
    <img src="https://via.placeholder.com/300x120" alt="">
</span>

and in the style CSS declaration, reuse the variable in the content property

.csstooltip:hover:after {
    ...
    content: var(--img);
    ...
}

The functional example is dropped on https://demo.puce-et-media.com/aviel222/