Utilizamos o plugin hopscotch (criado pelo linkedin), e aplicamos a identidade visual do LocawebStyle.

Como funciona:

Dentro de cada projeto existe um tour.js (específico), que determina onde exibirá o Tour Guiado, qual o próximo passo e assim por diante. Em cada passo podemos implementar outras funções de navegação ou mesmo de eventos simulando interações, vale a pena ler a documentação do plugin para entender melhor sobre esses eventos e funções.

Cookie

Ao carregar pela primeira vez, a caixa de informação onde está o botão para iniciar o Tour, é exibida aberta logo após o carregamento da página, nas próximas vezes ela estará sempre fechada, a não ser que o cookie seja excluído.

*elem é o nome da variável do tour.js da página específica.

Abaixo segue um exemplo dos códigos necessários para implementar o Tour Guiado.

Chamando a função de navegação dentro do seu projeto, propositalmente com window.load

$(window).load(function() {
    //Onde tourDashboard é a variável que recebe os eventos do plugin no exemplo abaixo
    locastyle.guidedTour.init(tourDashboard);
  });

O valor do target (dentro do tour.js) server como referência de exibição do Tour Guiado. Na tabela abaixo alguns exemplos

tour.js

var configTour = {
  id: 'tourDemo',
  selectors: {
    init:  '#demo-init'
  },
  // Tradução dos botões
  i18n: {
    nextBtn: "Próximo",
    prevBtn: "Anterior",
    doneBtn: "Ok",
    skipBtn: "Sair",
    closeTooltip: "Fechar"
  },
  bubbleWidth: 250,
  showPrevButton: true,
  steps: [
    {
      target: 'passo1',
      title: 'Titulo passo 1',
      content: 'descrição passo 1',
      placement: 'bottom',
      arrowOffset: 'center'
    },
    {
      target: 'passo2',
      title: 'Título passo 2',
      content: 'texto passo 2.',
      placement: 'right',
      arrowOffset: 'center',
      yOffset: 'center'
    }
  ]
};

HTML

  x
  

    
Bem-vindo
    
Título
  
  Iniciar Tour
  

Exemplo

Faça um tour guiado usando as configurações do js de exemplo, acima: