Que más todo bien hoy hablaremos sobre driver.js, esta librería es ligera y muy simple, implementarla en nuestras webs es bastante fácil y en unos pasos veremos como hacerlo.

Lo primero será instalarla hay dos formas de hacerlo mediante Node.js con un manejador de paquetes:

# Usando npm
npm install driver.js

# Usando pnpm
pnpm install driver.js

# Usando yarn
yarn add driver.js

O utilizando la CDN, que al momento de esta publicación es esta:

// Colocalas dentro de la etiqueta head de tu HTML
<script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.js.iife.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.css"/>

Una vez instalada debemos crear un archivo .js o al final del HTML antes de cerrar la etiqueta body dentro de etiquetas script, en este caso lo haré con un archivo .js quedando así:

// tutotial.js

/*
    De esta forma si lo instalas con Node.js
*/
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

/*
    O de esta forma si utilizas la CND
*/
const driver = window.driver.js.driver;
const driverObj = driver();

const driverObj = driver();
driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title",
    description: "Description"
  }
});

Ahora expliquemos lo que hace el método driverObj.highlight, es una función que recibe un objeto de tipo JSON:

• element: Corresponde al identificador al que se le hará foco cuando se muestra el modal, se pueden utilizar diferentes selectores:
  • ID: Con el hashtag #
  • Selector de Clase CSS: Con el punto .
  • Con atributos personalizados: Con los data-attributes de las etiquetas tanto nativas de cada etiqueta o personalizados, ejemplo [data-type=text]
• popover: Está compuesto por un objeto que tiene:
  • title: Será el titulo que tendrá el Modal.
  • description: Un resumen de lo que hace el elemento que se quiere detallar.

Para ejecutar nuestro modal debemos llamar el método para que suceda:

driverObj.drive();

También podemos crear una serie de pasos, si queremos por ejemplo guiar al usuario por un formulario, la forma de hacerlo sería:

const driverObj = driver({
  showProgress: true,
  steps: [
    { element: '#nombre', popover: { title: 'Title', description: 'Description' } },
    { element: '#correo', popover: { title: 'Title', description: 'Description' } },
    { element: '#contraseña', popover: { title: 'Title', description: 'Description' } },
  ]
});

En esta ocasión le pasamos directamente a la librería un JSON con la instrucciones:

• showProgress: Recibe un boolean que mostrará en que paso va nuestro recorrido.
• steps: Recibe un array con lo que irá mostrando por cada paso.

Como podemos ver es bastante sencillo crear una guía con driver.js, pero digamos que queremos tener diferentes guías/tutoriales en un solo archivo, la forma que se me ocurrió y quizás a otros fue encapsular en una función cada instancia de la librería, ejemplo:

function guia1(){
    const driverObj = driver({
      showProgress: true,
      steps: [
        { element: '#nombre', popover: { title: 'Title', description: 'Description' } },
        { element: '#correo', popover: { title: 'Title', description: 'Description' } },
        { element: '#contraseña', popover: { title: 'Title', description: 'Description' } },
      ]
    });

    // Ejecutamos el método
    driverObj.drive();
}

function guia2(){
    const driverObj = driver({
      showProgress: true,
      steps: [
        { element: '#edad', popover: { title: 'Title', description: 'Description' } },
        { element: '#direccion', popover: { title: 'Title', description: 'Description' } },
        { element: '#telefono', popover: { title: 'Title', description: 'Description' } },
      ]
    });

    // Ejecutamos el método
    driverObj.drive();
}

// Seleccionamos de nuestro HTML los botones
const boton1=document.querySelector("#boton1")
const boton2=document.querySelector("#boton2")

// Ejecutamos la función correspondiente al hacer click en los botones
boton1.addEventListener("click",()=>{ guia1() })

boton2.addEventListener("click",()=>{ guia2() })

Aún hay mas por aprender de esta librería pero con esto ya pueden crear guías para sus webs.