Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

toolTitle (simple toolTip) – Plugin jQuery

In questo articolo realizzeremo un pulgin jQuery che ci permetta di implementare un semplice toolTip da associare ad un qualsiasi elemento html che compone la pagina.
In altre parole, far comparire un suggerimento/aiuto al passaggio del mouse su un elemento che compone la pagina sfruttando l’attributo title dell’HTML ed appunto il framework jQuery.

Utilizzeremo innanzitutto tre gestori di eventi: mouseover(quando il puntatore del mouse entra sull’elemento), mousemove(quando il puntatore si muove sull’elemento) e mouseout(quando il puntatore esce dall’elemento).

Come si potrà immaginare vorremmo che all’ingresso sull’elemento (mouseover) venga mostrato a video un box contenete il testo presente all’interno dell’attributo title; il box dovrà seguire il movimento del cursore(mousemove) e scomparire quando lo stesso esce dall’area dell’elemento(mouseout).
Applicheremo al box un effetto trasparenza, e lasceremo all’utente la scelta del colore di sfondo, del testo, della grandezza del font e delle proprietà del bordo in fase di configurazione del plugin.

Vediamo subito il codice completo del plugin toolTitle

/**
  * @author Fabio Donatantonio
  * www.donatantonio.net
  * 2011
  */
/**
  * tooltitle -> Tooltip jQuery
  */

(function($){
	$.fn.tooltitle = function(options) {

	var defaults = {
		textColor: '#fff',
		textSize: '12px',
		backgroundColor: '#000000',
		border: '1px solid #DDDDDD',
		padding: '3px',
		transparency: '0.8'
	};

	var options = $.extend(defaults, options);

	return this.each(function() {
		var tit = $(this).attr('title');
		if(tit=='' || tit==undefined || tit==null){
			tit = "Nessuna descrizione";
		}
                $(this).data('title',tit).removeAttr('title');

		$(this).mouseover(function(e){
			$('body').append('</pre>
<div class="tooltip">'+$(this).data('title')+'</div>
<pre>
');

			$('.tooltip').css('position', 'absolute')
			.css('z-index', '9999')
			.css('backgroundColor', options.backgroundColor)
			.css('color', options.textColor)
			.css('fontSize', options.textSize)
			.css('border', options.border)
			.css('padding', options.padding);

			$('.tooltip').css('top', e.pageY + 5 )
			.css('left', e.pageX + 10 );

			$('.tooltip').fadeTo('10',options.transparency);
			e.stopPropagation();
		}).mouseout(function(){
			$('.tooltip').fadeOut('100').remove();
		}).mousemove(function(e){
			$('.tooltip').css('top', e.pageY + 5)
			.css('left', e.pageX + 10 );
		});
	});

	return false;
	};
})(jQuery);

Immaginiamo ora di voler applicare toolTitle ad un link:

<a class="myLink" title="Vai al link!" href="#">Clicca qui</a>

per richiamare il plugin sull’elemento scriveremo:

$('.myLink').tooltitle({
		textColor: '#DDDDDD',
		textSize: '15px',
		backgroundColor: '#0000FF',
		border: '1px solid #CCCCCC',
		padding: '4px',
		transparency: '0.8'
});

toolTitle jQuery Plugin screenshot

 

 

 

Il plugin accetta come parametri:

  • Colore del testo
  • Grandezza del font
  • Colore di sfondo del toolTitle
  • Lo stile per il bordo del toolTitle
  • Il padding
  • Il grado di trasparenza (da 0 a 1)

In alternativa potremo invocare toolTitle senza parametri, sfruttando le impostazioni di default:

$('.myLink').tooltitle();

Per far si che il plugin funzioni in maniera corretta è necessario, logicamente, impostare l’attributo title nell’html per l’elemento che vogliamo animare.
E’ possibile, inoltre, associare il plugin a qualsiasi elemento html.
Se volessimo, infine, scrivere il contenuto del toolTitle su più righe basta utilizzare il tag <BR/> all’interno del tag title.

Il plugin non necessita di fogli di stile.

Cliccando qui è possibile vedere in azione il plugin toolTitle.

Cliccando qui è possibile scaricare il codice del plugin toolTitle.

 

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×