Živá ukázka

Výsledek

<div class="box" data-tutorial-step="1" data-tutorial="V kroku jedna si <br>vezměte strouhanku.">Krok 1</div>
<div class="box" data-tutorial-step="6" data-tutorial="V kroku šest si vezměte stopky a začněte měřit milisekundy.">Krok 6</div>
<div class="box" data-tutorial-step="3" data-tutorial="V kroku tři si vezměte plzeňského juniora.">Krok 3</div>
<div class="box" data-tutorial-step="2" data-tutorial="V kroku dva si vezměte kobercovku.">Krok 2</div>
<div class="box" data-tutorial-step="5" data-tutorial="V kroku pět si vezměte míč na ragby.">Krok 5</div>
<div class="box" data-tutorial-step="4" data-tutorial="V kroku čtyři si vezměte nejlepšího trenéra.">Krok 4</div>
<div class="box" data-tutorial-step="7" data-tutorial="V posledním kroku si vezměte foťák, umístěte ho na stativ a všechno vyfoťte.">Krok 7</div>

HTML

Autoformát
Standardní režim
Mobilní zobrazení

.tutorial-overlay {position: fixed; top: 0; left: 0; z-index: 100; background: #000; opacity: .8; filter: alpha(opacity=80); z-index: 100; display: block; height: 100%; width: 100%;}
.tutorial-highlight {z-index: 101}

.tutorial-cover .tutorial-content {position: absolute; background: #fff; color: #000; padding-bottom: 2em; z-index: 101; min-width: 300px; max-width: 600px; box-shadow: 0px 0px 4px 2px rgba(255,255,255, 0.4)}
.tutorial-cover .tutorial-back, .tutorial-cover .tutorial-next {position: absolute; bottom: 0; left: 0; z-index: 10}
.tutorial-cover .tutorial-next {left: auto; right: 0}

.tutorial-close {background: #000; color: #fff; float: right; margin: 0 0 .5em .5em}
.tutorial-text {padding: 1em}

.tutorial-cover button {border: 1px solid #000; padding: .4em 1em; }
.tutorial-step {text-align: center; position: absolute; bottom: 0; left: 0; width: 100%;}

.tutorial-content:before {border: 10px solid transparent; width: 0px; height: 0px; display: inline-block; position: absolute; content: ""}
.tutorial-content.tutorial-down:before {border-top: 10px solid #ffffff; bottom: -20px; left: 10px;}
.tutorial-content.tutorial-left:before {border-right: 10px solid #fff; left: -20px; top: 10px;}
.tutorial-content.tutorial-right:before {border-left: 10px solid #ffffff; left: auto; right: -20px; top: 10px;}
.tutorial-content.tutorial-up:before {border-bottom: 10px solid #ffffff; top: -20px; left: 10px;}

CSS

Autoformát
CSS reset
Až na konci

var step = 1;

function tutorial() {
  var lStep = "Step", lBack = "Back", lNext = "Next", lClose = "Close";
  var tutorialCover, tutorialContent, tutorialOverlay, back, next, tutorialText, stepCount, currentStep;

var steps = document.querySelectorAll('*[data-tutorial]').length;
  if (steps == 0) return;
  createTutorialElements();
  changeStep();

function createTutorialElements() {
    if (tutorialCover) return;

tutorialCover = document.createElement("div");
    tutorialCover.className = "tutorial-cover";

tutorialContent = document.createElement("div");
    tutorialContent.className = "tutorial-content";

tutorialOverlay = document.createElement("div");
    tutorialOverlay.className = "tutorial-overlay";
    tutorialOverlay.onclick = closeTutorial;

back = document.createElement("button");
    back.className = "tutorial-back";
    back.innerHTML = lBack;
    
    next = document.createElement("button");
    next.className = "tutorial-next";
    next.innerHTML = lNext;

var close = document.createElement("button");
    close.className = "tutorial-close";
    close.onclick = tutorialOverlay.onclick;
    close.innerHTML = "×";
    close.title = lClose;

tutorialText = document.createElement("div");
    tutorialText.className = "tutorial-text";

stepCount = document.createElement("div");
    stepCount.className = "tutorial-step";

tutorialContent.appendChild(close);
    tutorialContent.appendChild(tutorialText);
    tutorialContent.appendChild(back);
    tutorialContent.appendChild(stepCount);
    tutorialContent.appendChild(next);

tutorialCover.appendChild(tutorialOverlay);
    tutorialCover.appendChild(tutorialContent);

document.body.appendChild(tutorialCover);
  }

function changeStep() {
    currentStep = document.querySelector('*[data-tutorial-step="' + step + '"]');
      
    tutorialText.innerHTML = currentStep.getAttribute('data-tutorial');
    highlight();

back.style.display = (step == 1) ? "none" : "block";
    next.innerHTML = (step == steps) ? lClose : lNext;
    stepCount.innerHTML = lStep + " " + step + " / " + steps;

back.onclick = function() {
      step--;
      changeStep();
    }

next.onclick = function() {
      if (step == steps) {
        closeTutorial();
        return;
      }
      step++;
      changeStep();
    }
  }

function clearHighlight() {
    var hlElement = document.querySelector('.tutorial-highlight');
    if (hlElement) hlElement.className = hlElement.className.replace(' tutorial-highlight', '');
  }

function highlight() {
    clearHighlight();
    var el = currentStep;
    tutorialCover.style.display = "block";

if (getStyle(el, "position") == "static") {
      el.style.position = "relative";
    }

var clientRect = el.getBoundingClientRect();
    var top = clientRect.top + (document.documentElement.scrollTop || document.body.scrollTop);
    var left = clientRect.left + (document.documentElement.scrollLeft || document.body.scrollLeft);

var space = 20;
    var screenWidth = document.documentElement.clientWidth;
    tutorialContent.className = "tutorial-content";

// Scroll up/down if element is out of viewport
    if (top < (document.documentElement.scrollTop || document.body.scrollTop) || top + tutorialContent.offsetHeight > ((document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.clientHeight)) {
      window.scrollTo(0, top - space);
    }

if (left < tutorialContent.offsetWidth && (screenWidth - (left + el.offsetWidth)) < tutorialContent.offsetWidth) {
      tutorialContent.style.left = left + "px";
      tutorialContent.style.top = top + el.offsetHeight + space + "px";
      tutorialContent.className += " tutorial-up";

}
    else if (left > tutorialContent.offsetWidth) {
      tutorialContent.style.left = left - tutorialContent.offsetWidth - space + "px";
      tutorialContent.style.top = top + "px";
      tutorialContent.className += " tutorial-right";
    }
    else {
      tutorialContent.style.left = left + el.offsetWidth + space + "px";
      tutorialContent.style.top = top + "px";
      tutorialContent.className += " tutorial-left";
    }
   
    el.className += " tutorial-highlight";
  }

function closeTutorial() {
    tutorialCover.style.display = "none";
    clearHighlight();
  }

window.onresize = function() {
    if (tutorialCover && tutorialCover.style.display != "none") {
      highlight();
    }
  }

JS

Autoformát
jQuery
Umístění JS