JSFiddle - React, Tailwind, and code Playground

HTML

<img src="https://www.google.nl/images/srpr/logo11w.png" style="position:absolute;top:0px;" />

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="position:absolute;top:0px;width:500px;">
    <ellipse cx="188" cy="92" rx="42" ry="42" 
             style="fill:transparent;" 
             onmouseover="svg_mouseover(this);" 
             onmouseout="svg_mouseout(this);" 
             data-category="lipstick" />
    <ellipse cx="286" cy="92" rx="42" ry="42" 
             style="fill:transparent;" 
             onmouseover="svg_mouseover(this);" 
             onmouseout="svg_mouseout(this);" 
             data-category="eye makeup" />
</svg>

<div id='messagediv' style='margin-top:250px;border:1px solid red;height:25px;'>message</div>

JavaScript

function svg_mouseover(objSVG)
    {
    document.getElementById('messagediv').innerHTML = objSVG.style.fill + ', ' + objSVG.getAttribute('data-category');
    }

function svg_mouseout(objSVG)
    {
    document.getElementById('messagediv').innerHTML = '';
    }