Mon cahier d’exercices sur jQuery & Co
Ce que je crois savoir. Ce que je pense devoir faire. Si je ne me trompe pas !

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 http : 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"
});
Un mot pour remplir.
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 le forum jQuery
s'il vous plait.

Avertissement solennel

Autodidacte en informatique, l’auteur a tous les défauts de sa qualité. Si vous vous inspirez, copiez ou pire utilisez le contenu de cette page, vous êtes téméraire, inconscient du danger !

Reconnaissant avoir été dûment informé, vous déchargez l’auteur et à fortiori l’hébergeur du site de toute responsabilité dans les graves dégâts que vous causerez sûrement !

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

Creative Commons License Attribution-Share Alike 2.0 Belgium Except where otherwise noted, content on this site is licensed under a Creative Commons License : Attribution-Share Alike 2.0 Belgium

Mention obligatoire : "Auteur : Hagnoul Daniel (http://www.developpez.net/forums/u285162/danielhagnoul/)"