Intro.js Top ToolTip

by Kishore Sahasranaman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/1.0.0/intro.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/usablica/intro.js/master/introjs.css">
<div id="intro_step1"><h1>Big Header</h1>
<div id="intro_step2"><h2>Bacon ipsum!</h2>
<p>Bacon ipsum dolor amet short loin drumstick jowl, shankle turkey beef venison. Doner short ribs landjaeger fatback tri-tip. Chicken sausage cow shoulder beef ribs porchetta bacon picanha frankfurter. Meatloaf kielbasa pork chop landjaeger pork. Flank pancetta leberkas prosciutto porchetta chuck ham. Capicola turkey short ribs leberkas frankfurter ham hock.</p></div>
<div id="intro_step3"><h2>I Love Bacon ipsum!</h2>
<p>Bacon salami kielbasa, spare ribs alcatra turducken t-bone tenderloin chicken pork chop venison rump. Pork chop fatback hamburger pig spare ribs capicola, rump corned beef ham hock tri-tip ribeye cow. Shank beef brisket, turducken boudin strip steak pig chuck short loin spare ribs pork chop rump. Turducken bacon salami tongue. Bacon turkey drumstick doner tail fatback prosciutto.</p></div>
<div id="intro_step4"><h2>More Bacon ipsum!</h2>
<p>Alcatra pork chop turducken pancetta biltong, filet mignon short loin jowl beef ham shoulder corned beef. Shoulder hamburger boudin cow t-bone alcatra sausage. Turkey shank short ribs filet mignon flank porchetta. Pork chop alcatra kielbasa, pork frankfurter boudin drumstick pig strip steak tenderloin landjaeger.</p></div>
<div id="intro_step5"><h2>Have You Heard Of Bacon ipsum!</h2>
<p>Pancetta leberkas shoulder flank prosciutto jowl, beef ribs meatloaf beef. Ham turducken strip steak pancetta spare ribs kevin, landjaeger beef pork jowl. Chicken tongue pork leberkas jowl, picanha rump bacon fatback. Cupim short loin beef ribs shoulder.</p></div>
<div id="intro_step6"><h2>Can There Be Too Much Bacon ipsum?</h2>
<p>Turducken beef ribs brisket, meatloaf leberkas ball tip venison short ribs shankle. Ground round tenderloin shoulder,...

CSS

.introjs-overlay {
  position: absolute;
  z-index: 999999;
  background-color: #000;
  opacity: 0;
  background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
  background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.introjs-fixParent {
  z-index: auto !important;
  opacity: 1.0 !important;
  position: absolute !important;
  -webkit-transform: none !important;
     -moz-transform: none !important;
      -ms-transform: none !important;
       -o-transform: none !important;
          transform: none !important;
}

.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  z-index: 9999999 !important;
}

.introjs-disableInteraction {
  z-index: 99999999 !important;
  position: absolute;
}

.introjs-relativePosition,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
  position: relative;
}

.introjs-helperLayer {
  position: absolute;
  z-index: 9999998;
  background-color: #FFF;
  background-color: rgba(255,255,255,.9);
  border: 1px solid #777;
  border: 1px solid rgba(0,0,0,.5);
  border-radius: 4px;
  box-shadow: 0...

JavaScript

var introProfile = introJs();
introProfile.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro_step1',
            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
            position: 'top'
        },            {
            element: '#intro_step2',
            intro: 'Your profile contains important information which is important to complete so that...',
            position: 'bottom'
        },
        {
            element: '#intro_step3',
            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
            position: 'top'
        },
        {
            element: '#intro_step4',
            intro: 'Click here to add a photograph of yourself.',
            position: 'top'
        },
        {
            element: '#intro_step5',
            intro: 'Your photograph will appear when your profile matches a ...',
            position: 'top'
        },
        {
            element: '#intro_step6',
            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
introProfile.oncomplete(function() {
    ;
});
introProfile.onexit(function(){
    ;
});
introProfile.onchange(function(targetElement) {
    ; //add change bits here
});
introProfile.onafterchange(function(targetElement) {
    console.log(targetElement.id);
    switch (targetElement.id){
        case "intro_step1":
            $('.introjs-tooltip').css({top:'80px',left:'200px'});
    } 
});
introProfile.onbeforechange(function(targetElement) {
    ; // add change bits here
});

introProfile.start();