Make image appear on hover

Question

I'm trying to make a tooltip system, where if the mouse is hovering over a span element with the property tooltip (which would would evaluate to the path of an image), the image would display on the top right of the screen.

<style>
    span[tooltip]:hover:after{
        content: attr(tooltip);
        margin-left:auto;
        }
</style>
<p><span tooltip='url("graphics/new_folder")'>Click "New">"Folder upload"</span> and upload the folder from its location</p>

Simply renders the text url("graphics/new_folder") after the span element. Replacing content: attr(tooltip); with content:url("graphics/new_folder") displays the image, but styling interacts with it weirdly. Giving it position:fixed , float:right , and float:top not only don't change its position, but also don't effect the image from the perspective of the viewport. Giving it height and width values plays with the positioning weirdly, too.

So, multiple questions here:

1. How can I make content:attr(tooltip) effectively render an image?
2. How can I make properties properly apply to the image/get the image to the top right of the screen?
3. Have I been oblivious to an API that could do this? I would expect one to exist, but can't find one.

I've been grappling with this for a while now, help would be greatly appreciated!

Answer 1

You will have to set the image tag as <img src='my_image' style='display:none;' id='open'> <img src='my_image' style='display:none;' id='open'>

Now with the tag element that requires the hovering should have an onMouseover event with the call of document.getElementById('open').style.display= taught that helps.

Answer 2

You cannot do this by css content:attr() you have to use <img src=""> inside span and than hover on it image will show but you can't do this by css content:attr() .

Alternative u can do the same thing by using data Attr ie data-tooltip="graphics/new_folder"