Tour/tutorial sito web

[betaalfa]

Salve,
come posso realizzare un tour/tutorial del sito web in modo semplice, come da esempio?
Mi piacerebbe creare questa finestra con freccia di riferimento, affinché in ogni step si sposti in punti differenti della pagina, con pulsante per tornare indietro

Non so neanche cosa cercare su google

Chi mi sa aiutare?

Grazie mille!

tour sito web 1.jpg
tour sito web 2.jpg
tour sito web 4.jpg

[fcaldera]

il problema nello specifico è come creare i vari tooltip, come posizionarli o come visualizzarli in step?
cosa hai fatto finora e dove ti sei bloccato?

[betaalfa]

cosa hai fatto finora e dove ti sei bloccato?

Non ho ancora fatto nulla, chiedo come approcciarmi per iniziare.
Ci sono codici di esempio già pronti? essenzialmente non saprei neanche cosa cercare per iniziare :/

[fcaldera]

per il posizionamento dei layer cerca "position absolute + relative"

per la funzione di tour: si tratta essenzialmente di uno script che cerca tutti i tooltip in pagina, li nasconde e setta un click handler agli spot sensibili che li aprono.

L'handler gestisce la chiusura di eventuali tooltip aperti e l'apertura del tooltip associato, mentre un tour tra i tooltip non è altro che un trigger ciclico dell'evento click sugli spot (in questo caso devi avere una variabile che tiene traccia del tooltip aperto)

di fatto è un problema legato più a javascript che a css, quindi sposto la discussione

[betaalfa]

Cercando su google "CSS Balloon" ho trovato: http://konigi.com/tools/css-tooltips-and-speech-bubbles
Può essermi utile allo scopo?
Dovrei attivare il primo step/tour da un click su link, dentro la finestra del balloon dovrei posizionare un pulsante "Skip" e "Next"
è possibile sfruttando l'esempio in questione come base?
Grazie