Plugin dvjhTooltip

"Auteur : Hagnoul Daniel"

Texte : v1.0.0 2010-02-13

Infobulle

Téléchargement ftp : jquery.dvjhTooltip-2.8.3.js

Téléchargement https : jquery.dvjhTooltip-2.8.3.js

<a id="reflect" href="fondations/evenement.html"
	class="tooltipImage"
	title="Les navigateurs internet traitent de manière anarchique
	les événements JavaScript, mais jQuery s'occupe en interne des
	particularités de chacun et offre en externe une interface unique.
	Il possède un système événementiel élaboré, assez facile à appréhender,
	mais méconnu et sous-exploité si j'en juge par les questions posées sur
	le forum jQuery.">
	Les événements JavaScript
</a>

$("#reflect").dvjhTooltip({
	needClass: "tooltipImage",
	width: "270px",
	height: "200px",
	color: "white",
	fontWeight: "bold",
	backgroundImage: "url('images/imageTest.png')"
});

Les événements JavaScript

<a id="picker" href="plugin-dvjh/reflect.html"
	class="tooltipImage"
	title=" ">
	Plugin Reflect
</a>

$("#picker").dvjhTooltip({
	needClass: "tooltipImage",
	width: "180px",
	height: "60px",
	backgroundImage: "url('images/adoptez-le.png')"
});

Plugin Reflect

/*
 * tooltip pour les éléments <a> et <abbr> qui ont la class="tooltip"
 *
 * Le lien vers Bonjour n'a pas la class="tooltip"
*/

$("a, abbr").dvjhTooltip();

Planning.

Bonjour

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div id="affiche"
	class="tooltipDiv"
	title="Un tooltip assez long, avec des réglages spécifiques
	et qui raconte n'importe quoi pour meubler la conversation !">
	Un mot pour remplir.
</div>

$("#affiche").dvjhTooltip({
	needClass: "tooltipDiv",
	width: "300px",
	backgroundColor: "#FAEBD7",
	fontSize: "1.2em",
	lineHeight: "1.8em",
	textMargin: "12px",
	border: "2px groove gray"
});

Daniel Hagnoul

Plugin jquery.dvjhTooltip-2.8.3.js

Code : v2.8.3 2010-02-13
Code : v1.0.0 2008-11-15
----------------------------------------
Nota Bene : l'attribut title doit exister et être au minimum égal à " "

Exemple 1 :
	tooltip pour l'élément d'id="affiche" et de class="tooltipDiv"
	
	$("#affiche").dvjhTooltip({
		needClass: "tooltipDiv",
		width: "300px",
		backgroundColor: "#FAEBD7",
		fontSize: "1.2em",
		lineHeight: "1.8em",
		textMargin: "12px",
		border: "2px groove gray"
	});
 
Exemple 2 :
	tooltip pour les éléments <a> et <abbr> qui ont la class="tooltip"
	
	$("a, abbr").dvjhTooltip();

Exemple 3 :
	tooltip pour l'élément d'id="reflect" et de class="tooltipImage"
	
	$("#reflect").dvjhTooltip({
		needClass: "tooltipImage",
		width: "270px",
		height: "200px",
		color: "white",
		fontWeight: "bold",
		backgroundImage: "url('images/imageTest.png')"
	});

Exemple 4 :
	tooltip pour l'élément d'id="picker" et de class="tooltipImage"
	
	$("#picker").dvjhTooltip({
		needClass: "tooltipImage",
		width: "180px",
		height: "60px",
		backgroundImage: "url('images/adoptez-le.png')"
	});
----------------------------------------
Options disponibles, réglages par défaut :
	xOffset: 10,
	yOffset: -20,
	needClass: "tooltip",
	width: "200px",
	height: "auto",
	color: "black",
	backgroundColor: "#FFFFE0",
	backgroundImage: "none",
	fontFamily: "sans-serif",
	fontStyle: "italic",
	fontSize: "0.8em",
	fontWeight: "normal",
	lineHeight: "1.3em",
	textMargin: "6px",
	border: "1px solid #777777",
	mozBoxShadow: "#000000 0px 4px 10px -5px",
	mozBorderRadius: "4px",
	webkitBoxShadow: "0px 2px 4px #999999",
	webkitBorderRadius: "5px"

À bientôt !

 

Veuillez poser vos questions
techniques sur les forums DVP,
s'il vous plait.

Vous n'aurez jamais fini d'apprendre la programmation, aussi apprenez à apprendre en vous amusant.