JSFiddle - React, Tailwind, and code Playground

HTML

<br><br><br><br> 
<span><div class="tooltip" rel="이런 저런 내용이나 설명1">링크나 제목</div>
<div class="tooltip" rel="이런 저런 내용이나 설명2">링크나 제목</div>
<div class="tooltip" rel="이런 저런 내용이나 설명3">링크나 제목</div>
<div class="tooltip" rel="이런 저런 내용이나 설명4">링크나 제목</div>
<div class="tooltip" rel="이런 저런 내용이나 설명5">링크나 제목</div>
<div class="tooltip" rel="이런 저런 내용이나 설명6">링크나 제목</div>  
  </span>

CSS

/* --- base --- */ 
 .tooltip { position: relative; text-decoration: none; cursor:hand    } 
 .tooltip:hover { color: #999999; text-decoration: none !important; } 
      
 .tooltip:hover:after , .tooltip:hover:before { display: block; } 
  
 /* --- tooltip container --- */ 
.tooltip:before { 
     content: attr(rel); 
     display: block; 
     width: 140px; 
     position: absolute; 
     z-index: 1000; 
     bottom: 150%; 
     left: -10px; 
     padding: 5px 10px 8px 10px; 
     text-align: left; 
     color: #ffffff; 
     display: none; 
     /* background */ 
     background: #404040; /* CSS2 */ 
     background: -moz-linear-gradient(top, #4e4e4e 0%, #404040 100%); /* FF3.6+ */ 
     background:  -webkit-gradient(linear, left top, left bottom,  color-stop(0%,#4e4e4e),  color-stop(100%,#404040)); /* Chrome,Safari4+ */ 
     background: -webkit-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Chrome10+,Safari5.1+ */ 
     background: -o-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Opera 11.10+ */ 
     background: -ms-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* IE10+ */ 
     background: linear-gradient(top, #4e4e4e 0%,#404040 100%); /* W3C */ 
     filter:  progid:DXImageTransform.Microsoft.gradient(  startColorstr='#4e4e4e',  endColorstr='#404040',GradientType=0 ); /*  IE6-9 */ 
     /* border-radius */ 
     -webkit-border-radius: 2px; 
     -moz-border-radius: 2px; 
     border-radius: 2px; 
     /* box-shadow */ 
     -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
     -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
     /* text-shadow */ 
     text-shadow: 0px 1px 0px #292929; 
 } 
      
 /* --- tooltip arrow --- */ 
 .tooltip:after { 
     content: ""; 
     display: block; 
     width: 0; 
     height: 0; 
     position: absolute; 
     z-index: 1000; 
     bottom: 18px; 
     left: -2px; 
     border-left: 6px solid transparent; 
     border-right: 6px solid transparent; 
    ...