Tooltip - Create "Tooltip" code snippets for free without coding

<span 
id="cs_tooltip_parent_m94bl83z" 
style="text-decoration: underline; font-size: 16px; color: gray;">Hover this text, tooltip
</span>

<script>
    
const tooltipEl = document.createElement("span");
    tooltipEl.innerText = `Tooltip text`;
    tooltipEl.style.fontSize = "16px";
    tooltipEl.style.position = "absolute";
    tooltipEl.style.padding = "8px";
    tooltipEl.style.color = "white";
    tooltipEl.style.backgroundColor = "rgba(0,0,0,0.5)";
    tooltipEl.style.borderRadius = "4px";
    tooltipEl.style.zIndex = "9999";
      
    tooltipEl.style.maxWidth = "320px";
        

      
const parentTextEl = document.getElementById("cs_tooltip_parent_m94bl83z");

      parentTextEl.addEventListener("mouseenter", (e) => {
        
if (window.innerWidth >= 1024) {
          
const parentRect = parentTextEl.getBoundingClientRect();
          
          tooltipEl.style.left = parentRect.left + parentRect.width + 4 + "px";
          tooltipEl.style.top = parentRect.top + parentRect.height + window.scrollY + 4 + "px";
          tooltipEl.style.transform = "";
      
          document.body.appendChild(tooltipEl);
        }
      });

      parentTextEl.addEventListener("mouseleave", (e) => {
        
if (window.innerWidth >= 1024) {
          tooltipEl.remove();
        }
      });

      parentTextEl.addEventListener("click", (e) => {
        
if (window.innerWidth < 1024) {
          e.stopPropagation();
          tooltipEl.remove();

          
const parentRect = parentTextEl.getBoundingClientRect();
          
          tooltipEl.style.left = parentRect.left + parentRect.width + 4 + "px";
          tooltipEl.style.top = parentRect.top + parentRect.height + window.scrollY + 4 + "px";
          tooltipEl.style.transform = "";
      
          tooltipEl.addEventListener("click", (e) => {
            e.stopPropagation();
            tooltipEl.remove();
          });
          document.addEventListener("click", mobileCloser);
          document.body.appendChild(tooltipEl);
        }
      });

      
function mobileCloser(e) {
        e.preventDefault();
        tooltipEl.remove();
        document.removeEventListener("click", mobileCloser);
      }
    
</script>

CODE SPIT

Underline

Preview