JSFiddle - React, Tailwind, and code Playground

by Paco86

HTML

hello  
hello  
hello  
<a 
  href="#"
  class="tooltip"
  onmouseenter="showTooltip()"
  onfocus="showTooltip()"
  onmouseleave="hideTooltip()"
  onblur="hideTooltip()"
  >
  I have tooltip
</a> 

<div role="tooltip">
  <p>
    People You May Know
  </p>
  <div>
    <img src="#" alt="profile photo">
    <span>
      Paco Feng
    </span>
    UI engineer
    <a href="">+ Connect</a>
    
    <span>x</span>
  </div>
  <a href="">See more >></a>
</div>

CSS

.tooltip {
  position: relative; 
}
[role="tooltip"] {
  position: absolute;
  display: none;
  border: 1px solid #000;
  padding: 10px;
  background-color: #efefef;
  top: 20px;
  left: 0;
  width: 200px;
}

JavaScript

document.querySelectorAll('.tooltip').forEach((el) => {
	['mouseenter', 'focus'].forEach((userEvent) => {
  	el.addEventListener(userEvent, (event) => {debugger
      var tooltipEl = document.querySelector('[role="tooltip"]');
      tooltipEl.style.display = 'block';
      var tooltipElPosition = tooltipEl.getBoundingClientRect();
      
      var tooltipLinkElPosition = event.target.getBoundingClientRect()
      contentEl.style.left = tooltipLinkElPosition.x + 'px';
      contentEl.style.top = tooltipLinkElPosition.y + 'px';
      
      
      
      /* if (contentElPosition.right > window.innerWidth) {
        contentEl.style.left = (window.innerWidth - contentElPosition.right) - 40 + 'px';
      }
      if (contentElPosition.bottom > window.innerHeight) {
        contentEl.style.top = (window.innerHeight - contentElPosition.top) - 40 + 'px';
      } */
      
    });
  });
  ['mouseleave', 'blur'].forEach((userEvent) => {
  	el.addEventListener(userEvent, (event) => {
      var contentEl = document.querySelector('[role="tooltip"]');
      contentEl.style.display = 'none';
      contentEl.style.left = 0;
    });
  });
});