Cursor-Follow Tooltip

<div class="tf" id="tf">Hover and move around this area<span class="tf-tip" id="tfTip">👋 Hi there!</span></div>

body{background:#f6f7fa}
.tf{position:relative;width:320px;height:180px;border-radius:16px;background:#fff;border:1px dashed #cdd3e0;display:grid;place-items:center;font:600 15px/1 system-ui,sans-serif;color:#8a93ad;cursor:none;overflow:hidden}
.tf-tip{position:absolute;background:#1a1f36;color:#fff;font-size:13px;padding:7px 12px;border-radius:9px;pointer-events:none;opacity:0;transition:opacity .2s;transform:translate(-50%,-150%);white-space:nowrap}
.tf:hover .tf-tip{opacity:1}

var tf=document.getElementById('tf'),tip=document.getElementById('tfTip');
tf.addEventListener('mousemove',function(e){var r=tf.getBoundingClientRect();tip.style.left=(e.clientX-r.left)+'px';tip.style.top=(e.clientY-r.top)+'px'});