Here is my reprex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating-UI Example</title>
<style>
.tooltip {
position: relative;
cursor: pointer;
display: inline-block;
margin-top: 100px;
}
.tooltip-content {
display: none;
position: absolute;
background: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
white-space: pre-wrap;
z-index: 1000;
}
</style>
<script src="https://unpkg.com/@floating-ui/[email protected]/dist/floating-ui.dom.umd.js"></script>
</head>
<body>
<div class="tooltip" id="tooltip">
Hover over me
<div class="tooltip-content" id="tooltip-content">
Tooltip content
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const { computePosition, offset, flip, shift } = window.FloatingUIDOM;
const tooltip = document.getElementById('tooltip');
const tooltipContent = document.getElementById('tooltip-content');
tooltip.addEventListener('mouseenter', () => {
tooltipContent.style.display = 'block';
computePosition(tooltip, tooltipContent, {
placement: 'top',
middleware: [
offset({ mainAxis: 10 }), // Correct usage of offset
flip(),
shift({ padding: 5 })
],
}).then(({ x, y }) => {
Object.assign(tooltipContent.style, {
left: `${x}px`,
top: `${y}px`
});
}).catch(error => {
console.error("Error computing position:", error);
});
});
tooltip.addEventListener('mouseleave', () => {
tooltipContent.style.display = 'none';
});
});
</script>
</body>
</html>