How to add a tooltip at the right side of the image when hovering the image using javascript mouse events

Question

I need to have a tooltip in to the right side of my image with some information as i hover this specific image using image map. Here is my code bellow.

<img id="spell-1-sun" src="shm_resources/magic/1-mesomorph-body-unav.png" usemap="#spell-1-sun" border="0" alt="" class="magic-sun-1">

<map id="i-spell-1-sun" name="spell-1-sun">
<area shape="poly" coords="0,0,39,1,39,39,0,39" data-passage="Ultimate Test 2" alt="" title="" data-setter="$spellsunone to 'on'" onMouseOver="if(document.images) document.getElementById('spell-1-sun').src= 'shm_resources/magic/1-mesomorph-body-hover.png';" onMouseOut="if(document.images) document.getElementById('spell-1-sun').src= 'shm_resources/magic/1-mesomorph-body-unav.png';"/>
</map>

Everything is working as intended, but i'm struggling to add this tooltip to the image to finally close this case. Please, help me.

So far everything that i have tried about adding a tooltip to the right side using image map() failed. Thank you all in advance.