Lo que hace este script JavaScript iGuider es generar mensajes de ayuda Tooltip para interfaces de usuario, los mensajes tooltip son para guiar al usuario sobre las utilidades de cada elemento en la interfaz, son más interactivos que los manuales tradicionales perfecto para páginas web dinámicas, puede usar el builder para generar el tooltip deseado y pegar el código o adaptarlo en su proyecto.

mensajes de ayuda en html tooltip

Ejemplo de Mensajes de ayuda Tooltip en JavaScript

En el siguiente ejemplo se detalla los pasos para implementar el plugin de JavaScript iGuider en un proyecto, en la parte superior debe ir los enlaces a los archivos JS, seguido de los valores de la descripción de los mensajes, el id jugará un rol importante para identificar cada elemento en la estructura HTML.

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">

<!--Primero se agrega los archivos JS-->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/iGuider.css">
<script src="js/jquery.iGuider.js"></script> <!-- ubicación de los mensajes tooltip -->
<link rel="stylesheet" href="themes/material/iGuider-theme-material.css">
<script src="themes/material/iGuider-theme-material.js"></script>

<script>
var opt = {
    'tourTitle': 'Tour Title Default',
    'steps': [
        {
            'title': 'New Step Title', //title
            'content': 'New Step Description', //description
            'target': '#el_1' //id
			
        },
        {
            'title': 'New Step Title 2',
            'content': 'New Step Description',
            'target': '#el_2'
        }
    ]
};

$(window).on('load',function(){
    iGuider('button',opt);
});
</script>

</head>
<body>
	<div style="max-width:800px; margin:40px auto;">
		<p id="el_1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		<p id="el_2">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
	</div>



</body>
</html>

El script viene con un manual extenso para conocer más sobre el plugin JavaScript iGuider, también hay un plugin para WordPress incluido el cual es ideal para implementar en una web con este CMS, es importante tener conocimientos previos en JavaScript, HTML y PHP para modificar el script.

Descargar el Script

Shares:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *