title: How to display a tooltip div when an SVG element is hovered
body: <p>I requirement for an inline SVG chart which has a "more information" icon which should trigger "tooltip" on hover. See attached.<a href="https://i.stack.imgur.com/LR3cr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LR3cr.png" alt="enter image description here"></a></p>
  
  <p>I have the tooltip div styled and is used in other places but I also need it to trigger on the information icon inside the SVG.</p>
  
  <p>I know I can't add the tooltip html inside SVG, so what other options are available to me?</p>
  
  <p>The "chart" is just inline SVG taken directly from a graphic programme (Sketch in this instance). Am not using any frameworks or libraries like D3 or chartjs. Please don't suggest to use a library or framework as it's not an option.</p>
  
  <p>Similar SO question but they don't answer my question:
  <a href="https://stackoverflow.com/questions/102457/how-to-create-an-svg-tooltip-like-box">How to create an SVG &quot;tooltip&quot;-like box?</a></p>