javascript - bootstrap - La mejor manera de proporcionar un "recorrido de información sobre herramientas"

tooltip jquery ui ejemplos

Question

¿Cuál es la mejor manera de proporcionar un recorrido rápido de una aplicación web utilizando información sobre herramientas contextual?

Caso de uso:

• usuario navega a la aplicación web
• alguna forma de ventana emergente que pregunta si el usuario desea una visita guiada de la interfaz
• El usuario puede hacer clic en siguiente en cada información sobre herramientas para ver la siguiente.
• el usuario puede cancelar el recorrido en cualquier momento haciendo clic en algún tipo de salida X o botón

¿Hay una biblioteca fácil por ahí que hace esto?

¡Gracias!

Answer 1

La forma más fácil de hacer esto es con la guía de la Guider-JS herramientas de JavaScript de Guider-JS Jeff Pickhardt. Es muy fácil de usar (aunque también tiene varias características muy avanzadas) y hace exactamente lo que describió.

Puede ver este excelente ejemplo de un recorrido de información sobre herramientas hecho con Guider-JS.

Si desea ver un ejemplo de trabajo en un sitio de producción, se utiliza ampliamente en optimizely.com para proporcionar ayuda y guías para la interfaz de usuario.

ACTUALIZACIÓN: La Fundación ZURB ahora mantiene la excelente biblioteca de javascript de recorrido de herramientas "Joyride" .

Answer 2

También puede escribir la parte del recorrido usted mismo utilizando una lista vinculada con un iterador que siempre llama a una devolución de llamada para configurar la información sobre herramientas y otra para cerrarla. A continuación, puede utilizar cualquier script de información sobre herramientas que desee. Aquí hay una rápida prueba de concepto que debería mostrarte lo que quiero decir:

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