Accurate Element Position and Dimensions with getBoundingClientRect()

// Assume an element on the page, e.g., a button
// <button id="myButton" style="position: absolute; top: 100px; left: 200px; padding: 10px;">Get Rect</button>

const myElement = document.getElementById('myButton');

if (myElement) {
    const rect = myElement.getBoundingClientRect();

    console.log('Element dimensions and position relative to viewport:');
    console.log('Left:', rect.left, 'px');      // X-coordinate of the left edge
    console.log('Top:', rect.top, 'px');        // Y-coordinate of the top edge
    console.log('Right:', rect.right, 'px');    // X-coordinate of the right edge
    console.log('Bottom:', rect.bottom, 'px');  // Y-coordinate of the bottom edge
    console.log('Width:', rect.width, 'px');    // Width of the element (content + padding + border)
    console.log('Height:', rect.height, 'px');  // Height of the element (content + padding + border)
    console.log('X:', rect.x, 'px');            // Alias for left
    console.log('Y:', rect.y, 'px');            // Alias for top

    // Example: Position a tooltip directly below the element
    const tooltip = document.createElement('div');
    tooltip.textContent = 'This is a tooltip!';
    tooltip.style.position = 'absolute';
    tooltip.style.backgroundColor = '#333';
    tooltip.style.color = 'white';
    tooltip.style.padding = '5px';
    tooltip.style.borderRadius = '3px';
    tooltip.style.top = `${rect.bottom + 5}px`; // 5px below the button
    tooltip.style.left = `${rect.left}px`;
    document.body.appendChild(tooltip);

} else {
    console.error('Element #myButton not found.');
}