JSFiddle - React, Tailwind, and code Playground

by Oleh Kotsubko

HTML

<div class="flex">
  <button data-tip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae provident voluptatem d" class="top left">Top left</button>
  <button data-tip="Tip <br> tip" class="top right">Top right</button>
  <button data-tip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae provident voluptatem d">Center</button>
  <button data-tip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae provident voluptatem d" class="bottom left">Bottom left</button>
  <button data-tip="Lorem ipsum dolor sit amet<br> Some info" class="bottom right">Bottom right</button>
</div>
<button data-tip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae provident voluptatem d">Tip</button>
<div class="wrapper end">
  <button data-tip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae provident voluptatem dignissimos, eos illo possimus">Tip</button>
</div>
<div class="wrapper end">
  <button data-tip=" elit. Repudiandae provident voluptatem dignissimos, eos illo possimus" style="margin-right: 100px">Tip</button>
</div>
<div class="wrapper center">
  <button data-tip="Repudiandae provident voluptatem dignissimos, eos illo possimus">Tip</button>
</div>
<button data-tip="Tip <br> tip" style="margin-left: 100px">Tip</button>
<button data-tip="Tip <br> tip">Tip</button>

<div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem atque necessitatibus labore aliquid amet aperiam itaque culpa omnis dolorum expedita blanditiis quasi, dignissimos quis, explicabo? Laboriosam quam perferendis quibusdam minus.</div>
<div>Illo unde eveniet vitae maiores nisi sapiente alias quaerat amet esse quasi omnis est praesentium temporibus blanditiis totam, tempora magnam autem dignissimos consectetur dolore ad voluptates voluptatibus. Doloribus, distinctio, eveniet.</div>
<div>Eos dignissimos totam excepturi blanditiis, dicta aspernatur veniam eveniet deserunt voluptates corporis accusamus...

SCSS

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

body {
  position: relative;
}

.simple-tip {
  border: 1px solid #000;
  background: rebeccapurple;
}

.flex {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 600px;
}

.top {
  position: absolute;
  top: 0;
}

.bottom {
  position: absolute;
  bottom: 0;
}

.left {
  left: 0;
}
  
 .right {
   right: 0;
 }

JavaScript

const tips = document.querySelectorAll("[data-tip]");
let tooltip;

[...tips].forEach((item)=>{

  item.addEventListener('mouseover', function(){
  	
    tooltip = document.createElement('div');
    tooltip.classList.add('simple-tip');
    tooltip.style.position = "fixed"
    document.body.append(tooltip);
   	tooltip.style.top = 0
    tooltip.style.left = 0
    tooltip.innerHTML = this.dataset.tip
    
    const x = this.getBoundingClientRect().top
		const y = this.getBoundingClientRect().left
    const offsetY = tooltip.offsetHeight
		const offsetX = tooltip.offsetWidth
    const elemWidth = this.offsetWidth
    const elemHeight = this.offsetHeight
    
    if( window.innerWidth < offsetY * 1.5 ) {
      tooltip.style.maxWidth = (window.innerWidth / 2)+'px';
    } else {
      tooltip.style.maxWidth = 320 + 'px';
    }
    
    if(x > offsetY) {
   		console.log(x, offsetY)
    	tooltip.style.top = (x - offsetY - elemHeight) + "px"
    } else {
    	tooltip.style.top = (x + elemHeight) + "px"
    }
    	
    let pos = (y + (elemWidth - offsetX) / 2)
    
    if(pos < 0) {
    	
      tooltip.style.left = 0 + "px"
      
    } else {
    	
      tooltip.style.left = pos + "px"
    }
    
   
  });
  
  item.addEventListener('mouseout', function(){
    tooltip.remove()
  })
})

window.addEventListener('scroll', function() {
	tooltip.remove()
})