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
	

Exemplo

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