Discussion :

[tiboleo]

Bonjour,

Je suis à la recherche d'un plugin jquery qui me permette d'afficher de belles info bulles.
J'ai regardé par exemple jTip (très sympa), qTip et d'autres encore mais pour aucun d'entre eux, je ne sais si on peut leur faire aller chercher l'info à afficher dans le ToolTip de mes TextBox (asp.net)

Sauriez vous m'orienter ?
Merci !

[boutmos]

Le meilleur moyen est peut être que tu fasses ce test ?

[tiboleo]

Bien entendu !
Mais comme les journées et les délais sont toujours trop courts, si quelqu'un a une idée...ça pourrait m'aider...
T.

[boutmos]

bon alors perso je me suis bien pris la tête avec des infobulles via JQuery. Je te partages mon code. C'est adapté a mes besoins il faudra donc que tu modele un peu et que tu definisses le CSS de ta div tooltip :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
function tooltip(){
 
	xOffset = 10;
	yOffset = -20;
	widthTip = 250;	/* Largeur des tooltip par defaut. sinon c'est l'attribut REL ou ALT definissant sa taille	*/
 
//	$("a.tooltip").unbind();	// Detruit les traces des precedents evenements pour eviter les empilements d'evenements.
 
	$(".tooltip").bind("mouseenter", function(e){
 
		if (this.alt) widthTip = parseInt(this.alt);
		if (this.rel) widthTip = parseInt(this.rel);
 
		this.widthBody = $("body").width();
		this.coordX = e.pageX;
		this.t = this.title;
 
		this.title = "";
 
		construct="<div id='tooltip'>";
			construct+="<div class='toolTitle'>"+ this.t +"</div>";
			construct+="<div class='toolContent'>"+ widthTip +"</div>";
		construct+="</div>";
 
		$("body").append(construct);
 
		$("#tooltip")
			.css("font-style", "italic")
			.css("top",(e.pageY - yOffset) + "px")
			.css("left",(e.pageX + xOffset) + "px")
			.css("opacity", "0.85")
			.fadeIn("normal");
	});
 
	$(".tooltip").bind("mouseleave", function(e){
		this.title = this.t;	// Restaure le title du <a href>
		$("#tooltip").remove();
		widthTip = 250;	/* pour les tooltip n'ayant pas de taille predefinie par les balises alt ou rel	*/
	});
 
	$(".tooltip").bind("mousemove", function(e){
 
		if ( this.widthBody-e.pageX > ( widthTip + 50 ) ) {
			$("#tooltip")
				.css("top",(e.pageY - yOffset) + "px")
				.css("left",(e.pageX + xOffset) + "px")
				.css("width", widthTip + "px");
		} else {
			$("#tooltip")
				.css("top",(e.pageY - yOffset) + "px")
				.css("left",(e.pageX - ( widthTip + 30 ) + xOffset) + "px")
				.css("width", widthTip + "px");
		}
	});
 
}

Tu l'appels au chargement via un :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(document).ready(function(){
   tooltip();
});

Puis sur la balise HTML ou tu veux avoir la tooltip, tu ajoute simplement une classe tooltip

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
#tooltip {
	position:absolute;
	display:none;
/* 	font-family: Verdana, Arial; */
	font-family: "Arial","Verdana","Helvetica",sans-serif;
	line-height: 1;
	font-size: 14px;
	border: 1px solid #777;
	background-color: #FFF;
 
		-moz-box-shadow: #000 0px 4px 10px -5px;
		-moz-border-radius: 4px;
 
	    -webkit-box-shadow: 0px 2px 4px #999;
		-webkit-border-radius: 5px;
}
 
#tooltip .toolTitle {
	background-color: #777;
	color: #FFF;
	text-align: justify;
	font-weight: bold;
	padding: 5px;
}
 
#tooltip .toolContent {
	margin: 5px;
	color: #444;
	text-align: justify;
}

[tiboleo]

Merci beaucoup.
Celui ci est d'une grande simplicité. Je cherche simplement à avoir une image qui puisse s'adapter au contenu de l'infobulle.