JSFiddle - React, Tailwind, and code Playground

by damiantt

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" width="380" height="100">

  <text class="caption" x="10" y="35">Mouseover a square</text>
  <text class="caption" x="10" y="50">to display a tooltip</text>

  <rect id="rect1" x="160" y="10" width="60" height="60" fill="blue" onmousemove="ShowTooltip(evt, 'The amazing blue box')" onmouseout="HideTooltip(evt)" />

  <rect id="rect2" x="240" y="10" width="60" height="60" fill="green" onmousemove="ShowTooltip(evt, 'Box')" onmouseout="HideTooltip(evt)" />
</svg>

CSS

#tooltip {
  color: white;
  font-size: 12px;
}

#tooltipDiv {
  border: solid 5px black;
  display: table;
  background-color: black;
  opacity: 0.8;
}

JavaScript

function init(evt) {
  var fObj = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject");
  fObj.setAttributeNS(null, "width", "100%");
  fObj.setAttributeNS(null, "height", "100%");
  fObj.setAttributeNS(null, "id", "tooltip");
  fObj.setAttributeNS(null, "visibility", "hidden");

  //var body = document.createElement("body");
  //body.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
  var div = document.createElement("div");
  div.id = "tooltipDiv"
  console.log('blahghhh!<br> world');
  div.innerHTML = 'blahghhh!<br> world';
  //body.appendChild(div);
  fObj.appendChild(div);
  document.getElementsByTagName('svg')[0].appendChild(fObj);
}

function ShowTooltip(evt, mouseovertext) {
  tooltip.setAttributeNS(null, "x", evt.clientX);
  tooltip.setAttributeNS(null, "y", evt.clientY);
  $('#tooltipDiv').html(mouseovertext);
  tooltip.setAttributeNS(null, "visibility", "visible");
}

function HideTooltip(evt) {
  tooltip.setAttributeNS(null, "visibility", "hidden");
}