Plugin ToolTip pour Jquery [Fait]

**suckthewindow** · 19/02/2009, 17h20

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

**cadoudal56** · 25/02/2009, 14h06

Hello,

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

Dans la page :

Code :

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

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 :

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
 
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

**marcha** · 25/02/2009, 15h57

@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 :

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
<!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>

**suckthewindow** · 26/02/2009, 14h51

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

**danielhagnoul** · 26/02/2009, 23h37

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.

**suckthewindow** · 27/02/2009, 10h51

Bonjour,
Merci c'est exactement ce que je cherchais

JErome

**suckthewindow** · 27/02/2009, 11h44

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 :

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
 
/*
 * 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"})

**danielhagnoul** · 27/02/2009, 23h29

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.

**danielhagnoul** · 01/03/2009, 22h44

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 :

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
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 :

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
 
<!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>

**danielhagnoul** · 01/03/2009, 22h56

Oups ! Petit oubli. Version corrigée :

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
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 :

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

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

**SpaceFrog** · 02/03/2009, 13h16

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

Plugin ToolTip pour Jquery [Fait]

jQuery

Discussions similaires

Partager

Partager