JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<div class="wrapper">

  <div class="container">
    <p>
      FAKE MAP
    </p>
  </div>

  <div class="record">

  </div>

</div>


<div class="popover">

</div>

CSS

:root{
  --zoom: 0.8;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  zoom:var(--zoom);
}

.container {
  margin: 1rem;
  padding: 1rem;
  background-color: grey;
  width: 80vw;
  height: 80vh;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.record {
  position: absolute;
  z-index: 1;
  left: 2rem;
  top: 2rem;
  display: flex;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid black;
}

.popover{
  display:none;
  z-index:10;
  position:absolute;
  background-color:orange;
  color:white;
  padding:0.5rem;
}

JavaScript

var cont = $(".container");
var rec = $(".record");

cont.on('click', function(e) {

  var cords = {
    px: e.pageX,
    py: e.pageY,
    cw: $(this).innerWidth(),
    ch: $(this).innerHeight(),
    conOffset: $(this).offset(),
    zoom: 0.6
  };

  console.log(cords);
  callpop(cords);

});


function callpop(cords) {
  pop = $('.popover');
  pop.hide();

  pop.css({
    'left': cords.px + 'px',
    'top': cords.py + 'px'
  });

  var info =
    '<p>mouse xPos:' + cords.px + '<br>' +
    'mouser yPos:' + cords.py + '<br>' +
    'contaimner width:' + cords.cw + '<br>' +
    'container height:' + cords.cy + '<br>' +
    'container offset top: ' + cords.conOffset.top +'<br>' + 
    'container offset left: ' + cords.conOffset.left +'<br>' + 
    'zoom:'+ cords.zoom +'</p>';

  pop.html(info).show();

//recalc:




}