Il modo migliore per fornire un "tour tooltip"

Question

Qual è il modo migliore per fornire un rapido tour di una webapp utilizzando tooltip contestuali?

Caso d'uso:

• utente passa alla webapp
• una qualche forma di pop-up che chiede se l'utente vuole una visita guidata dell'interfaccia
• utente può cliccare prossimo su ogni suggerimento per essere mostrato la prossimo
• utente può annullare il tour in qualsiasi momento facendo clic su un qualche tipo di uscita X o il tasto

c'è un libreria facile là fuori che fa questo?

Grazie!

Answer 1

Il modo più semplice per farlo è con la libreria di strumenti javascript tooltip Guider-JS di Jeff Pickhardt. È molto facile da usare (sebbene abbia molte funzioni molto avanzate) e fa esattamente quello che hai descritto.

È possibile dare un'occhiata a this excellent example di una descrizione del tooltip realizzata con Guider-JS.

Se si desidera vedere un esempio di lavoro su un sito di produzione, viene utilizzato ampiamente su optimizely.com per fornire aiuto e guide dettagliate per l'interfaccia utente.

UPDATE: ZURB Fondazione sta ora mantenendo la libreria javascript eccellente "Joyride" tooltip tour.

Answer 2

È anche possibile scrivere la parte del tour da soli utilizzando un elenco collegato con un iteratore che richiama sempre un callback per impostare il suggerimento e uno per chiuderlo. Puoi quindi utilizzare qualsiasi script di descrizione comandi che desideri. Ecco una rapida prova di concetto che dovrebbe mostrare che cosa voglio dire:

var toolTipList = { 
    tooltips: [], 
    currentTooltip: {}, 
    addTooltip: function(tooltip){ 
     var currentTail = this.tooltips.length > 0 ? this.tooltips[this.tooltips.length - 1] : {}; 
     var newTail = { 
      tooltip: tooltip, 
      prev: currentTail 
     }; 
     currentTail.next = newTail; 
     this.tooltips.push(newTail); 
    }, 

    initialize: function(){ 
     this.currentTooltip = this.tooltips[0]; 
     this.currentTooltip.tooltip.callback(); 
    }, 

    next: function(){ 
     if(this.currentTooltip.next){ 
      this.currentTooltip.tooltip.close(); 
      this.currentTooltip = this.currentTooltip.next; 
      this.currentTooltip.tooltip.callback();   
     } 
    }   
}; 


for(var i = 0; i < 10; i++){ 
    toolTipList.addTooltip({ 
     callback: function(){ 
      // called every time next is called 
      // open your tooltip here and 
      // attach the event that calls 
      // toolTipList.next when the next button is clicked 
      console.log('called'); 
     }, 
     close: function(){ 
      // called when next is called again 
      // and this tooltip needs to be closed 
      console.log('close'); 
     } 
    }); 
} 

toolTipList.initialize(); 

setInterval(function(){toolTipList.next();}, 500); 

​JSFiddle link