Plugin ToolTip pour Jquery

Version imprimable

19/02/2009, 17h20
suckthewindow

Plugin ToolTip pour Jquery

Bonjour à tous,
Je cherche désesperement un plugin de Tooltip qui marche bien et qui soit compatible avec IE6 et jquery 1.3 !
Ca à l'air tout bête mais je galere vraiement !!

J'ai essayé:
- http://bassistance.de/jquery-plugins...lugin-tooltip/ : qui est plutot pas mal mais qui plante avec les dialog de jquery.ui (j'ai des tooltip dans une dialogue!)
- http://www.codylindley.com/blogstuff/js/jtip/ : seulement avec AJAX :'(
- http://www.pierrebertet.net/projects...simpletooltip/ pas compatible avec jquery 1.3

et plein d'autres encore !!!

D'ailleurs je me demande pourquoi il n'y en a pas dans jquery.ui alors que interface.js en avait (interface est bien l'ancetre de jquery.ui ?)

merci par avance,
Jerome

Hello,

Pourquoi n'essaie tu pas d'en faire un toi même ???

Dans la page :
Code:

1 2 3 4 <DIV id="img_1" onmouseover="javascript:showtootltip('text_1','img_1'); return false;")" onmouseout="javascript:hidetooltip('text_1'); return false;")"> <img src="monimage.jpg" width='50' height='50'></div> <div id="text_1" style="display:none;">JQUERY c trop bien !</div>
Et maintenant dans le fichier .js
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function showtooltip(idimg, idbloc) { var width = $("#"+idbloc).width(); var bloc = $("#"+idbloc).position(); $("#"+idbloc).mousemove(function(e){ $("#"+idimg).css("top",e.pageY + 20); $("#"+idimg).css("left",e.pageX + 20); }); $("#"+idimg).css("position","absolute"); $("#"+idimg).css("border","1px solid #000"); $("#"+idimg).css("width", 150); $("#"+idimg).css("padding", '5px'); $("#"+idimg).css("display","block"); $("#"+idimg).css("z-index",1000); $("#"+idimg).fadeIn(100); } function hidetooltip(idimg) { $("#"+idimg).css("display","none"); }
Quand tu survoleras l'image, une div apparaitra a coté de l'élément survolé. Le script Ajax showtooltip recupere le nom de l'élément survolé et le nom de la div a afficher. il prend le placement de l'élément survoler et calcule automatiquement l'emplacement de l'élément qui s'affiche.

Dis nous au moins si tu as reussi a le faire fonctionner

@+
cadou

@cadoudal56 C'est une bonne idée de proposer d'en développer un, mais
il faudrait exploiter un peu plus les possibilités de jQuery, à savoir:

1) Permettre un code javascript non obstrusif
2) Permettre de faire des plugins réutilisables

Voici un début de plugin en ce sens qui nécessite plein d'améliorations, c'est
un brouillon

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
span.tooltip span { background-color: yellow; border: 1px solid #666; }
span.tooltip { cursor: help; border-bottom: 1px dotted #009; color: #009; }
</style>
<script type='text/javascript' src='/libs/jquery-1.2.6.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
	$('.tooltip').tooltip();
});
 
(function($) {
 
  $.fn.tooltip = function(options) {
 
	var options = $.extend({ tipSelector: 'span' }, options);
 
	return this.each(function() {
		var obj = $(this);
		obj.css({ position: 'relative' });
		var tip = $(options.tipSelector, obj);
		tip.css({ position: 'absolute', top: '1.2em', left: '1em' });
		tip.hide();
		obj.mouseover( function(event) {
			tip.fadeIn('fast');
		});		
		obj.mouseout( function(event) {
			tip.fadeOut('slow');
		});		
	});
  };
 
})(jQuery);
 
 
</script>
</head>
<body>
<h1>titre</h1>
<p>un peu de texte avec le <span class='tooltip'>mot 1<span>tooltip mot 1</span></span> qui a une bulle d'info</p>
<p>encore un peu de texte avec le <span class='tooltip'>mot 2<span>tooltip mot 1</span></span> qui a aussi une bulle d'info</p>
</body>
</html>

26/02/2009, 14h51
suckthewindow

Bonjour à vous,
J'y ai bien deja pense à faire ma propres lib ! Mais elle plante lorsque je me trouve dans une dialogue de ui.dialog et comme la librairie ui possedait lorsqu'elle s'appellait interface une lib ToolTip je me demandais pourquoi il n'y en avait pas pour ui ?? Mais comme la majorite des ToolTip plante avec ui.dialog peut etre que ce n'est juste pas si facile ???

Jerome
26/02/2009, 23h37
danielhagnoul

Bonsoir.
Nouveau dans jQuery, j'ai pris le temps de découvrir jQuery UI que je ne connaissais pas. (C'est lourd et lent, surtout avec IE 7, me semble-t-il).

J'ai chargé une version personnalisée de UI avec le nécessaire pour faire tourner le dialogue et jQuery 1.3.2 pour l'essayer avec le tooltip que j'utilise pour l'instant, et à condition de mettre z-index:9999 ; pour le tooltip cela fonctionne.

J'ai mis le code exemple dans un emplacement provisoire, voir http://www.jmcu.net/dvjhDialogTooltip/

Attention, je ne l'y laisserai pas plus d'une semaine.

Avec Firefox 3, c'est plus fluide qu'avec IE 7, mais cela fonctionne des deux côtés.

Il reste du travail, en CSS, pour mieux signaler la présence du tooltip dans le dialogue. Pour l'instant, avec Firefox, il y a une bordure. Mais rien avec IE.
27/02/2009, 10h51
suckthewindow

Bonjour,
Merci c'est exactement ce que je cherchais :)

JErome

Bonjour danielhagnoul,
Afin que ce soit plus 'jquery' j'ai un peu reecrit ton code ... histoire de t'en faire profiter :)

encore merci!
Jerome

Code:

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
 
/*
 * Tooltip script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
(function($){
 
	$.fn.tooltip = function(settings){	
 
		settings = jQuery.extend({
			xOffset			: 10,
			yOffset			: 20,
			display_class	: "tooltip"
		}, settings);
 
		if ($(this).attr("title") != "") { 
 
			$(this).hover(function(e){										  
				this.t = this.title;
				this.title = "";									  
				$("body").append("<p class='" + settings["display_class"] + "'>"+ this.t +"</p>");
				$("."+settings["display_class"])
					.css("top",(e.pageY - settings["xOffset"]) + "px")
					.css("left",(e.pageX + settings["yOffset"]) + "px")
					.fadeIn("fast");		
		    },
			function(){
				this.title = this.t;		
				$("."+settings["display_class"]).remove();
		    });	
			$(this).mousemove(function(e){
				$("."+settings["display_class"])
					.css("top",(e.pageY - settings["xOffset"]) + "px")
					.css("left",(e.pageX + settings["yOffset"]) + "px");
			});			
		}
	};
 
})(jQuery)

utilisation:
$("*").tooltip({display_class: "ma_class"})

27/02/2009, 23h29
danielhagnoul

Bonsoir suckthewindow.

Merci pour la version modifiée.

Je signale juste que c'est n'est pas mon code mais celui de :
Alen Grakalic (http://cssglobe.com)

Cette nouvelle version est effectivement plus "canonique" mais je dois être idiot :( car je n'arrive pas à l'utiliser.

Pourriez-vous me donner un cours exemple d'utilisation : fichier html + css, svp.

Bonsoir.

J'ai écrit un nouveau plugin qui généralise l'idée du tooltip de Alen Grakalic et je le propose à tous.

Code:

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
58
59
60
 
/*
 * dvjhTooltip
 *
 * Généralisation du script de Alen Grakalic (http://cssglobe.com)
 * http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 * Le tag à commenté doit possédé les attributs : class="tooltip" et title="Un commentaire."
 *
 * CSS, il faut définir le style du paragraphe de commentaire et d'id="tooltip".
 * Exemple de CSS :
 * .tooltip {}
 * #tooltip{position:absolute; border:1px solid #CC6666; background-color:#CCFFCC; padding:6px; color:#000000; display:none; z-index:9999;}
 *
 * Usage : $("*").dvjhTooltip();
 */
(function($){
    $.fn.dvjhTooltip = function(options) {
        var opts = $.extend({}, $.fn.dvjhTooltip.defaults, options);
 
        return this.each(function(){
            if (($(this).hasClass($.fn.dvjhTooltip.defaults.needClass)) && ($(this).attr("title") != "")) { 
 
                var tag = $(this).get(0).tagName.toLowerCase();
 
                $(this).attr("dvjh", $(this).attr("title"));
 
                $(tag + "." + $.fn.dvjhTooltip.defaults.needClass).hover(
                    function(e){
                        $(this).attr("title","");
 
                        $("body").append("<p id='tooltip'>"+ $(this).attr("dvjh") +"</p>");
 
                        $("#tooltip")
                            .css("top",(e.pageY - $.fn.dvjhTooltip.defaults.xOffset) + "px")
                            .css("left",(e.pageX + $.fn.dvjhTooltip.defaults.yOffset) + "px")
                            .fadeIn("fast");        
                    },
                    function(){
                        $(this).attr("title", $(this).attr("dvjh"));
 
                        $("#tooltip").remove();
                    }
                );
 
                $(tag + "." + $.fn.dvjhTooltip.defaults.needClass).mousemove(function(e){
                    $("#tooltip")
                        .css("top",(e.pageY - $.fn.dvjhTooltip.defaults.xOffset) + "px")
                        .css("left",(e.pageX + $.fn.dvjhTooltip.defaults.yOffset) + "px");
                });
            }
        });
    };
 
    $.fn.dvjhTooltip.defaults = {
        xOffset: 10,
        yOffset: 20,
        needClass: "tooltip"
    };
})(jQuery);

Exemple :

Code:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Exemple d'utilisation de dvjhTooltip</title>
    <style type="text/css">
        acronym {
            text-decoration:underline;
        }
        .tooltip {}
        #tooltip{
            position:absolute;
            border:1px solid #CC6666;
            background-color:#CCFFCC;
            padding:6px;
            color:#000000;
            display:none;
            z-index:9999;
        }    
    </style>
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript" src="dvjhTooltip.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("*").dvjhTooltip();
        });
    </script>
</head>
<body>
    <p>
        <a href="http://cssglobe.com" class="tooltip" title="Un bref commentaire sur le lien hypertexte.">Roll over for tooltip</a>
    </p>
    <div style="margin:12px;">
        <p>
            Un <acronym class="tooltip" title="Un commentaire pertinent !">paragraphe</acronym> plein d'humour.
        </p>
    </div>
    <img class="tooltip" title="Une belle image se passe de commentaire !" src="1.jpg" alt="Une belle image" width="400" height="300" />
</body>
</html>

Oups ! Petit oubli. Version corrigée :

Code:

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
58
59
60
 
/*
 * dvjhTooltip
 *
 * Généralisation du script de Alen Grakalic (http://cssglobe.com)
 * http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 * Le tag à commenté doit possédé les attributs : class="tooltip" et title="Un commentaire."
 *
 * CSS, il faut définir le style du paragraphe de commentaire et d'id="tooltip".
 * Exemple de CSS :
 * .tooltip {}
 * #tooltip{position:absolute; border:1px solid #CC6666; background-color:#CCFFCC; padding:6px; color:#000000; display:none; z-index:9999;}
 *
 * Usage : $("*").dvjhTooltip();
 */
(function($){
    $.fn.dvjhTooltip = function(options) {
        var opts = $.extend({}, $.fn.dvjhTooltip.defaults, options);
 
        return this.each(function(){
            if (($(this).hasClass(opts.needClass)) && ($(this).attr("title") != "")) { 
 
                var tag = $(this).get(0).tagName.toLowerCase();
 
                $(this).attr("dvjh", $(this).attr("title"));
 
                $(tag + "." + opts.needClass).hover(
                    function(e){
                        $(this).attr("title","");
 
                        $("body").append("<p id='tooltip'>"+ $(this).attr("dvjh") +"</p>");
 
                        $("#tooltip")
                            .css("top",(e.pageY - opts.xOffset) + "px")
                            .css("left",(e.pageX + opts.yOffset) + "px")
                            .fadeIn("fast");        
                    },
                    function(){
                        $(this).attr("title", $(this).attr("dvjh"));
 
                        $("#tooltip").remove();
                    }
                );
 
                $(tag + "." + opts.needClass).mousemove(function(e){
                    $("#tooltip")
                        .css("top",(e.pageY - opts.xOffset) + "px")
                        .css("left",(e.pageX + opts.yOffset) + "px");
                });
            }
        });
    };
 
    $.fn.dvjhTooltip.defaults = {
        xOffset: 10,
        yOffset: 20,
        needClass: "tooltip"
    };
})(jQuery);

Usage :

Code:

1
2
3
4
5
6
7
8
 
    <script type="text/javascript">
        $(document).ready(function(){
            $.fn.dvjhTooltip.defaults.xOffset = -5;
 
            $("*").dvjhTooltip();
        });
    </script>

02/03/2009, 13h16
SpaceFrog

je trouve le toolTip de walterzorn vachement sympa ...
http://www.walterzorn.com/tooltip/tooltip_e.htm