JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="btn">Button</div>

<pre id="out"></pre>

CSS

html, body {
  margin: 0;
  padding: 0;
}

.btn {
  background: #c9c9c9;
  padding: 1em;
  margin: 1em 3em;
  display: inline-block;
}

pre {
  margin: 0 1em;
  white-space: pre-wrap;
}

JavaScript

const btn = document.querySelector('.btn');
const { width, left } = btn.getBoundingClientRect();

out.textContent = `A tooltip of ${left}px would fit on the left`