Cómo crear un complemento básico de jQuery Tooltip

Si ha tenido algo que ver con el desarrollo web últimamente, apenas necesita una introducción a jQuery o complementos de jQuery. De hecho, los complementos de jQuery se han vuelto tan populares que casi el 70% de Internet los utiliza de una forma u otra.

Principiante o profesional, cualquiera que sea su nivel de experiencia en desarrollo web, jQuery definitivamente debería estar en su lista de cosas para aprender y dominar. Con esto en mente, en este tutorial, le enseñaremos cómo crear un complemento jQuery Tooltip básico.

Entonces, esto es lo que crearemos:

Sin perder más tiempo, ensuciémonos las manos con una codificación increíble y dominemos la creación de un complemento jQuery.

La estructura del archivo

1. jqueryToolTip.css – Hoja de estilo de la información sobre herramientas.
2. jqueryToolTip.js : el archivo de complemento jQuery real.

Necesitamos asegurarnos de que nuestro complemento sea lo suficientemente flexible para que pueda servir a una variedad de usuarios y configuraciones de dispositivos sin problemas. Antes de continuar, daremos un vistazo a algunas reglas o conceptos que nos ayudarán a lograr esto.

Reglas para crear un complemento jQuery

1. Mantenga las identidades únicas : es muy importante tener una id única y nombres class para que, al momento de diseñar los elementos de su complemento, no anule los estilos de página actuales.
2. Dejar comentarios en línea : dejar comentarios en línea siempre es una buena práctica. Esto es esencial cuando se trata de complementos jQuery, porque a los usuarios y programadores les puede resultar difícil averiguar qué significa cada línea de código escrita por otra persona, y tratar de descifrar el código sin comentarios puede llevar mucho tiempo.
3. Minificar el código fuente : como su complemento no es lo único que se requiere para crear un sitio web, es importante usar el menor espacio y ancho de banda posible para el usuario final.

Si bien no existe una regla rígida para ello, mientras codigo, personalmente me ocupo de la parte de diseño antes de hacer que mi código sea funcional. Seguiremos el mismo modelo en este tutorial: primero escribiremos el HTML y el CSS necesarios antes de escribir el código para el complemento jQuery Tooltip real.

Cree un archivo .html de muestra y agréguele el siguiente código.

 <div id="jqueryToolTip_wrapper">
    <span class="jqueryToolTip_text">El texto de información sobre herramientas va aquí</span>
    <span class="jqueryToolTip_arrow"></span>
</div><!-- final jqueryToolTip -->

Ahora abra el archivo jqueryToolTip.css y pegue el siguiente CSS dentro de él.

 #jqueryToolTip_wrapper{
			fondo: ninguno repetir scroll 0 0 rgba(0, 0, 0, 0.8);
			borde-radio: 4px 4px 4px 4px;
			-webkit-border-radio: 4px 4px 4px 4px;
			-moz-border-radio: 4px 4px 4px 4px;
			color: #FFFFFF;
			tamaño de fuente: 12px;
			fuente-peso: negrita;
			altura de línea: normal;
			relleno: 5px;
			posición: absoluta;
			índice z: 999;
			familia de fuentes: Arial, "MS Trebuchet", sans-serif;
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow{
			arriba: automático;
			bloqueo de pantalla;
			ancho: 0;
			altura:0;
			borde: sólido 5px;
			border-color:transparente transparente rgb(0,0,0) transparente;
			border-color:transparente transparente rgba(0,0,0,0.8) transparente;
			posición:absoluta;
			arriba:-10px;
			izquierda: 10px
		}
		#jqueryToolTip_wrapper .jqueryToolTip_arrow.arrow_down{
			border-color:rgb(0,0,0) transparente transparente transparente;
			border-color:rgba(0,0,0,0.8) transparente transparente transparente;
			arriba: automático;
			inferior:-10px;
		}

Asegúrese de incluir el archivo .css dentro de su archivo .html de muestra y luego abra el archivo .html usando un navegador. Si todo va bien, podrá ver una información sobre herramientas de aspecto agradable con una flecha hacia arriba bastante similar a la imagen que se muestra a continuación.

Información sobre herramientas con flecha hacia abajo

Para agregar una flecha hacia abajo a la misma información sobre herramientas, todo lo que necesita hacer es agregar la clase .arrow_down al tramo con la clase existente .jqueryToolTip_arrow

Antes:

 <span class="jqueryToolTip_arrow"></span>

Después:

 <span class="jqueryToolTip_arrow arrow_down"></span>

Requisitos

Ahora que hemos terminado con la parte de HTML y CSS, podemos tomarnos un tiempo para comprender los requisitos antes de sumergirnos en la escritura del código para el complemento.

1. Necesitamos averiguar a qué elemento apuntar (porque no podemos mostrar la información sobre herramientas en cada enlace de anclaje).
2. Necesitamos agarrar los ejes X e Y en el enlace de anclaje actual en estado de desplazamiento.
3. Finalmente, necesitamos volver a colocar nuestro div de información sobre herramientas en el enlace de anclaje actual en estado de desplazamiento.

Esto puede parecer complicado, pero los filtros jQuery y los elementos de orientación CSS harán que nuestro trabajo sea mucho más fácil.

Conceptos básicos de los complementos de jQuery

Código de resumen:

 (función ($){
			$.fn.jqueryToolTip = function(toolTipOptions){
			}
			}
		})(jQuery);

El código dado arriba es lo que necesita usar cada vez que comience a crear un complemento desde cero. Aquí jqueryToolTip es el nombre del complemento y puede ser reemplazado por cualquier cosa que desee. Trate de mantenerlo único ya que dos complementos con el mismo nombre pueden crear un gran lío.

Configuración por defecto:

 var toolTipDefaults = {
			posición: "abajo"
		},

Dependiendo de su complemento, es posible que necesite tener algunas configuraciones predeterminadas. Por ejemplo, en nuestro tutorial, la posición es algo que debemos cuidar (es decir, si queremos mostrar la información sobre herramientas encima del elemento o debajo de él).

Anulación de valores predeterminados:

 toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

Siempre es una buena práctica dejar que los usuarios finales anulen la configuración predeterminada si así lo desean. En nuestro caso, hemos configurado la información sobre herramientas para que esté en la parte inferior de forma predeterminada. Ahora, si el usuario final quiere que esté en la parte superior, el código anterior anulará la configuración predeterminada con las opciones especificadas por el usuario final.

Aparte de lo que hemos discutido anteriormente, todo lo demás es código jQuery simple. Entonces, ¡ya podemos comenzar! Simplemente abra el archivo jqueryToolTip.js y coloque el siguiente código dentro de él.

 (función ($){
			$.fn.jqueryToolTip = function(toolTipOptions){
				var toolTipDefaults = {
					posición: "abajo"
				},
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;
				$('cuerpo').append(toolTipTemplate);
			}
		})(jQuery);

Hemos creado una variable llamada toolTipTemplate que va a contener el marcado HTML para nuestro jQuery ToolTip Plugin . A partir de entonces, agregaremos el marcado HTML al cuerpo de una página web.

 $(esto).each(función(){
			$(esto).hover(función(){
				// aquí va el código de las acciones que ocurren después de pasar el cursor sobre el enlace
			});
		});

$(this) es la referencia al elemento que iniciará nuestro complemento. Cada vez que el cursor del usuario final se desplace sobre el elemento requerido, mostraremos la información sobre herramientas y cambiaremos el texto que contiene al attr del título del enlace.

 $(esto).each(función(){
			// en la función de desplazamiento
			$(esto).hover(función(){
				var toolTipTitle = $(este).attr("título"); // obtener el título del enlace actual
				var toTop = $(this).offset().top; // obteniendo el eje Y del enlace actual
				var toLeft = $(this).offset().left; // obteniendo el eje X del enlace actual
				var toolTipHeight = $('#jqueryToolTip_wrapper').css("altura"); // obtener la altura de la información sobre herramientas
				var itemHeight = $(this).css("height"); // obteniendo la altura del enlace

				if(toolTipSettings.position == 'superior')
				{
					$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
					var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
				}
				demás
				{
					var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
				}

				$('.jqueryToolTip_text').html(toolTipTitle); // cambiar el texto de información sobre herramientas al título del enlace actual
				$('#jqueryToolTip_wrapper').css("mostrar","bloquear"); // configurar la visualización de información sobre herramientas para bloquear
				$('#jqueryToolTip_wrapper').css({ // establecer la información sobre herramientas en la posición izquierda y superior a la posición del enlace actual
					arriba: arribaFinal,
					izquierda: a la izquierda
				});
			},función(){
				$('#jqueryToolTip_wrapper').css("mostrar","ninguno"); // ocultar la información sobre herramientas después de que se realiza el desplazamiento
			});
		});

En el código anterior, he comentado todas y cada una de las líneas para brindarle una mejor comprensión de lo que intenta hacer el código dado.

Poniendolo todo junto

 (función ($){
			$.fn.jqueryToolTip = function(toolTipOptions){

				// configuración predeterminada para el complemento
				var toolTipDefaults = {
					posición: "abajo"
				},

				// extendiendo la configuración predeterminada
				toolTipSettings = $.extend({}, toolTipDefaults, toolTipOptions);

				// marcado HTML para el complemento de información sobre herramientas
				var toolTipTemplate = '<div id="jqueryToolTip_wrapper"><span class="jqueryToolTip_text"></span><span class="jqueryToolTip_arrow"></span></div><!-- end jqueryToolTip -->' ;

				// agregando el marcado
				$('cuerpo').append(toolTipTemplate);

				$(esto).each(función(){
					// en la función de desplazamiento
					$(esto).hover(función(){
						var toolTipTitle = $(este).attr("título"); // obtener el título del enlace actual
						var toTop = $(this).offset().top; // obteniendo el eje Y del enlace actual
						var toLeft = $(this).offset().left; // obteniendo el eje X del enlace actual
						var toolTipHeight = $('#jqueryToolTip_wrapper').css("altura"); // obtener la altura de la información sobre herramientas
						var itemHeight = $(this).css("height"); // obteniendo la altura del enlace

						if(toolTipSettings.position == 'superior')
						{
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').addClass('arrow_down');
							var topFinal = parseInt(toTop) - parseInt(toolTipHeight) - 10;
						}
						demás
						{
							var topFinal = parseInt(toTop) + parseInt(itemHeight) + 10;
							$('#jqueryToolTip_wrapper').find('.jqueryToolTip_arrow').removeClass('arrow_down');
						}

						$('.jqueryToolTip_text').html(toolTipTitle); // cambiar el texto de información sobre herramientas al título del enlace actual
						$('#jqueryToolTip_wrapper').css("mostrar","bloquear"); // configurar la visualización de información sobre herramientas para bloquear
						$('#jqueryToolTip_wrapper').css({ // establecer la información sobre herramientas en la posición izquierda y superior a la posición del enlace actual
							arriba: arribaFinal,
							izquierda: a la izquierda
						});
					},función(){
						$('#jqueryToolTip_wrapper').css("mostrar","ninguno"); // ocultar la información sobre herramientas después de que se realiza el desplazamiento
					});
				});
		}
		})(jQuery);

Cómo llamar al complemento

Llamar a nuestro complemento jqueryToolTip es tan simple como cualquier otro complemento jQuery.

Incluir archivo JS:

[html type=”text/javascript” language=”<script”]

<p>Incluir hoja de estilo:</p>

 <enlace rel="hoja de estilo" href="../Documentos/Descomprimido/jqueryToolTipPluginTutorial/jqueryToolTipPluginTutorial/jqueryToolTip.css" />

Cree un enlace de anclaje con atributo de título:

 <a href="#" title="Demostración de información sobre herramientas">Demostración de información sobre herramientas</a>

Llamando al complemento (básico):

 <script tipo="texto/javascript">
    $(función(){
        $('a').jqueryToolTip();
    })
</script>

Llamar al complemento (Opciones de paso):

 <script tipo="texto/javascript">
    $(función(){
        $('a').jqueryToolTip({
            posición: "arriba"
        });
    })
</script>

¡Finalizado!