JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<script src="https://unpkg.com/@svgdotjs/[email protected]/dist/svg.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="container" style="position:absolute;top:50px;left:190px;"></div>

JavaScript

$(document).ready(function() {
	var canvas = SVG()
    .addTo('#container')
    .size(400, 300)
    .viewbox('0 0 200 200')
    .css('background-color', '#f3f3f3');

  var table = canvas.group();

  var rect = canvas.rect(80, 20).fill('#f00');
  rect.move(50, 150);

  var fo1 = canvas.foreignObject(80, 20);
  fo1.add($(`
  	<div class='fortooltip'>Some text goes here</div>
  `)[0]);

  fo1.move(50, 150);

  table.add(rect);
  table.add(fo1);
  
  $('.fortooltip').bind('mouseover', function(e){
  	console.log($(this).position(), $(this).offset());
    //$(el).offset().top and $(el).position().top
    //console.log(this.getBoundingClientRect(), 'AA');
    //console.log(e.clientX + ' ' + e.clientY);
  });
  
  $('<div>').appendTo('body').css({
  	"position": "absolute",
    "width": "10px",
    "height": "10px",
    "top": "275px",
    "left": "315px",
    "background-color": "grey"
  })
});