JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="title" name="1">
    Title element 1
  </div>
  <div class="title" name="2">
    Title element 2
  </div><div class="title" name="2">
    Title element 2
  </div><div class="title" name="2">
    Title element 2
  </div>
</div>
<div style="position:absolute;left:100px;top:400px;">
<div class="title" name="2">
    Title element 8
  </div>
</div>
<div style="position:absolute;left:400px;top:400px;">
  <div class="title" name="2">
      Title element 7
    </div>
</div>
<div style="position:absolute;left:300px;top:1000px;">
  <div class="title" name="2">
      Title element 6
    </div>
</div>

<div class="title" name="2" style="position:absolute;right:0px;top:400px;background-color:green;width:250px;height:400;top:0px;">
    Title element 2
  
</div>

<div class="title" name="2" style="position:absolute;left:0px;background-color:blue;width:200px;height:70%;top:250px;">
    Title element 2
  
</div>

<div class="title" name="2" style="position:absolute;left:150px;background-color:yellow;width:200px;height:100px;top:220px;">
    Title element 2
  
</div>

<div class="title" name="2" style="position:absolute;left:0px;background-color:red;width:200px;height:100px;top:91%;">
    Title element 3
  
</div>
<div class="title" name="2" style="position:absolute;right:0px;background-color:orange;width:200px;height:100px;top:91%;">
    Title element 4
  
</div>

<div class="tour-tip " id="1">

1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
</div>

SCSS

.title{
  display: inline-block;
}
.tour-tip{
  padding:20px;
  height:200px;
  width:300px;
  word-break: break-all;
  position:absolute;
  background-color: white;
  color: #333;
  left: -1000px;
  top: -1000px;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 32px 0px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.1);
  animation-duration: 0.6s;
}
.top, .custleftbottom, .custrightbottom{
  animation-name: fadeanimTop;
}
.left{
  animation-name: fadeanimLeft;
}
.right{
  animation-name: fadeanimRight;
}
.bottom, .custlefttop, .custrighttop{
  animation-name: fadeanimBottom;
}


@keyframes fadeanimTop {
  0%   {opacity: 0;transform: translate(0%, -10%);}
  70%  {opacity:0.7;}
  100% {opacity:1;transform: translate(0%, 0%);}
}
@keyframes fadeanimLeft {
  0%   {opacity: 0;transform: translate(10%,0%);}
  70%  {opacity:0.7;}
  100% {opacity:1;transform: translate(0%, 0%);}
}
@keyframes fadeanimRight {
  0%   {opacity: 0;transform: translate(-10%,0%);}
  70%  {opacity:0.7;}
  100% {opacity:1;transform: translate(0%, 0%);}
}
@keyframes fadeanimBottom {
  0%   {opacity: 0;transform: translate(0%, 10%);}
  70%  {opacity:0.7;}
  100% {opacity:1;transform: translate(0%, 0%);}
}
.tour-tip::after {
  content: "";
  position: absolute;
  border-style: solid;
}
.tour-tip.bottom::after {
    bottom: 87%;
    left: 55%;
    margin-left: 0px;
    border-width: 14px;
    margin-top: -1px;
    border-color: transparent transparent white white;
    transform-origin: 0 0;
    transform: rotate(136deg);
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.14);
}
.tour-tip.right::after {
    top: 58%;
    left: 100%;
    margin-left: -1px;
    border-width: 14px;
    margin-top: -1px;
    border-color: transparent transparent white white;
    transform-origin: 0 0;
    transform: rotate(225deg);
    box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.14);
}
.tour-tip.top::after {
    top: 100%;
    left: 45%;
    margin-left: -1px;
    border-width:...

JavaScript

function addTip(target){
  let offset = target.offset();
 	let left = offset.left;
  let top = offset.top;
  let width = target.width();
  let height = target.height();
 	let ttipWidth = 300 + 40;
  let ttipHeight = 200 + 40;
  let win = $(window);
  let winWidth = win.width();
  let winHeight = win.height();
  let ttip = $(".tour-tip")
  let ttop = -1000;
 	let tleft = -1000;
  let arrow = "";
 if(left-ttipWidth > 0 && (top + (height/2) - (ttipHeight/2) > 0) && (top + height/2 + ttipHeight/2 < winHeight)){
    // Display right
    ttop = top + height/2 - (ttipHeight/2);
    tleft = left - ttipWidth - 30;
    arrow = "right";

  }
  else if(top + height + ttipHeight < winHeight && (left + width/2 - ttipWidth/2 > 0) && (left + width/2 + ttipWidth/2 < winWidth)){
    // Display bottom
    ttop = top + height + 30;
    tleft = left + (width/2) - (ttipWidth/2);
    arrow = "bottom";
  }
  else if(top - ttipHeight > 0 && (left + width/2 - ttipWidth >0) && (left + width/2 + ttipWidth/2 < winWidth)){
  	// Display top
    ttop = top - ttipHeight - 30;
    tleft = left + width/2 - (ttipWidth/2);
    arrow = "top";
  }
  else if((left + width + ttipWidth) < winWidth  && top- (ttipHeight/2) > 0 && top + (ttipHeight/2) < winHeight ){
  	// Display right
    ttop = top + (height/2) - ttipHeight;
    tleft = left + width + 30;
    arrow = "left";
  }
  else if(ttop === -1000 && tleft === -1000){
  	// corner elements
    if(left < winWidth/2 && top < winHeight/2){
    	// Top left
      ttop = top + height + 30;
	    tleft = left + 5;
      arrow = "custlefttop";
    }
    else if(left > winWidth/2 && top < winHeight/2){
    	// Top right
      ttop = top + height + 30;
	    tleft = left + width - ttipWidth - 10;
      arrow = "custrighttop";
    }
    else if(left < winWidth/2 && top > winHeight/2){
    	// Bottom left
      ttop = top - ttipHeight - 30;
	    tleft = left + 10;
      arrow = "custleftbottom";
    }
    else if(left > winWidth/2 && top > winHeight/2){
    	//...