JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/intro.js/0.6.0/intro.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/intro.js/0.6.0/introjs.min.css">
<div style="position:fixed; top:0px; width:100%; height:50px; background:#F4F4F4"><a href="" data-step="1" data-intro="This is a tooltip for element with fixed position of parent"  style="float:right; width:300px; text-align:center; display:block; height:20px; padding:5px; background:#FFDD00;">button</a></div>
<div style="position:fixed; bottom:0px; width:100%; height:50px; background:#F4F4F4" data-step="2" data-intro="This is a tooltip for element with fixed position itself" data-position='left' ><a href="" style="float:left; width:300px; text-align:center; display:block; height:20px;  padding:5px; background:#FFDD00;">button</a></div>

CSS

body{height:3000px;}

JavaScript

$( document ).ready(function() {
   introJs().start();
});