JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<button class="show-info">display content</button>
<div class="info first_info current" data-index="0">
  <span>This is first</span>
    <button class="info-next">
    Next
  </button>
</div>
<div class="info second_info" data-index="1">
  <span>This is second</span>
    <button class="info-next">
    Next
  </button>
</div>
<div class="info third_info" data-index="2">
  <span>This is third</span>
  <button class="info-next">
    Next
  </button>
</div>
<div class="info fourth_info last" data-index="3">
  <span>Last</span>
    <button class="info-last">
    Close
    </button>
</div>
<div class="first">add here the first tooltip</div>
<div class="second">add here the second tooltip</div>
<div class="third">add here the third tooltip</div>
<div class="fourth">add here the fourth tooltip</div>

CSS

.first_info,
.second_info,
.third_info,
.fourth_info {
  display:none;
  margin-bottom: 20px;
  position: absolute;
}
.first, .second, .third, .fourth {position:relative;}
.first {top: 100px;}
.second {top: 300px;left: 50px;}
.third {top: 500px;left: 100px;}
.fourth {top: 750px;left: 150px;}

JavaScript

$(document).ready(function(){
  $('.show-info').click(function(){
  	firstPos = $(".first").offset();
    secondPos = $(".second").offset();
    thirdPos = $(".third").offset();
    fourthPos = $(".fourth").offset();
    
    $('.first_info').css({
    	left: firstPos.left + "px",
      top: firstPos.top + 30 + "px"
    })
    $('.second_info').css({
    	left: secondPos.left + "px",
      top: secondPos.top + 30 + "px"
    })
    $('.third_info').css({
    	left: thirdPos.left + "px",
      top: thirdPos.top + 30 + "px"
    })
    $('.fourth_info').css({
    	left: fourthPos.left + "px",
      top: fourthPos.top + 30 + "px"
    })    

    $('.info.first_info').show();
  });
  $('.info-last').click(function(){
    $('.info').hide();
  });
  $('.info-next').click(function() {
      $('.current')
      	.removeClass('current')
      	.hide()
        .next(".info")
        .show()
        .addClass('current');
  });
});