IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Personnalisation d'une Tooltip


Sujet :

CSS

  1. #1
    Invité
    Invité(e)
    Par défaut Personnalisation d'une Tooltip
    Bonjour,

    Suite à cette discussion : [SVG] Afficher une Tooltip, je cherche maintenant à personnaliser ce fameux Tooltip.

    Je lui ai ajouté une "pointe directionnelle" arrow et c'est celle-ci qui me pose problème.

    1) Je ne parviens pas à créer ou simuler une bordure sur mon arrow (before / after), qui ai la même épaisseur que celle du corps du Tooltip.
    De plus son comportement est étrange, au move de la souris, l'élément "before" la bordure, semble avoir un décalage / retard par rapport à l'élément "after".

    2) Je ne sais pas comment appliquer le "box-shadow" sur mon arrow.

    3) Je ne parviens pas à appliquer l'opacité seulement sur mes "background".

    J'aimerais que mon Tooltip s'approche de ceci :

    Nom : infobulle.PNG
Affichages : 306
Taille : 12,9 Ko

    Et voici le code :

    Code css : 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
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    body{
    	background: #36b0b6;
       }
     
    .classTuile {
    	width: 250px;
    	height: 395px;	
    	padding: 6px;
    	margin-top: 20px;
    	margin-left:20px;
    	position: relative;
    	background-color: #FFFFFF;
    	outline: 1px solid #A0A0A0;		
    	outline-offset: -1px;				
    	border-radius: 12px;
    	color: #000000;
    	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
    	/*font-family: "Segoe UI";*/
    }
     
    .classTitre {
    	position: absolute;
    	width: 100%;	
    	height: 28px;	
    	text-align: center;
    	font-size: 14px;
    	background-color: #3e3e42;
    	color: #fff;
    	border-radius: 11px 11px 0 0;
    	outline: 1px solid #A0A0A0;		
    	outline-offset: -1px;					
    	margin-left: -6px;
    	margin-top: -6px;
    	-webkit-border-radius: 11px 11px 0 0;	
    	border-bottom: 4px solid #ff0000;
    }
     
    .classProg {
    	position: relative; 
    	width: 220px;
    	height: 40px;
    	top: 8px; 
    	margin-left: 10px;	
    	margin-top: 8px;
    }
    .enabledinfobulle {
    	cursor: pointer;
      }
     
      .infobulle {
    	pointer-events: none;
    	position: absolute;
    	font-size: 14px;
    	text-align: center;
    	padding-left: 5px;
    	padding-right: 5px;
    	z-index: 5;
    	min-width: 80px; 
    	height: 30px;
    	line-height: 30px;
    	margin: 0 auto;
    	color: #000000;
    	border-radius: 5px;
    	border: 1px solid #808080;
    	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
        -moz-transform: translateX(-50%);
    	-ms-transform: translateX(-50%);
    	-webkit-transform: translateX(-50%);
    	transform: translateX(-50%);
    	display: none;
      }
     
      .infobulle, .background {
        background: #ffffff;
        opacity: 0.8;
      }
     
      .infobulle.active {
    	display: block;
      }
     
      .infobulle:after, .infobulle:before {
    	content: "";
    	position: absolute;
    	left: 50%;
    	top: 100%;
    	width: 0;
    	height: 0;
      }	
     
      .infobulle:before {
    	margin-left: -12px;
    	border-left: 12px solid transparent;
    	border-right: 12px solid transparent;
    	border-top: 12px solid #808080;
    	/* box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.5); */
      }	
     
      .infobulle:after {
    	margin-left: -10px;
    	border-left: 10px solid transparent;
    	border-right: 10px solid transparent;
    	border-top: 10px solid #ffffff;
      }

    Code html : 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
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    <?php
     
    ini_set('display_errors', 1);
    ini_set('display_startup_errors', 1);
    error_reporting(E_ALL);
     
    $jours = array("Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim");
     
    ?>
     
    <html>
     
    <head>
     
        <title><?php echo "TITRE_PAGE";?>
        </title>
     
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
        <link href="css/vue.css" rel="stylesheet" type="text/css" media="all">
     
    </head>
     
    <body>
     
            <div class="classTuile">
                <span class="classTitre"><?php echo "Programmation chauffage";?></span>
                </br>
     
                <svg id="idHeaSch0" class="classProg" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
                </br>
                <svg id="idHeaSch1" class="classProg" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
                </br>
                <svg id="idHeaSch2" class="classProg" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
                </br>
                <svg id="idHeaSch3" class="classProg" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
                </br>
                <svg id="idHeaSch4" class="classProg" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
                </br>
                <svg id="idHeaSch5" class="classProg" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
                </br>
                <svg id="idHeaSch6" class="classProg" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="40" />
                </br>
             </div>
     
    		<div class="infobulle"></div>
     
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     
        <script type="text/javascript">
     
        var svgNS = "http://www.w3.org/2000/svg";
     
        function createSvgLine(idParent, x1, y1, x2, y2, color) {
            var myLine = document.createElementNS(svgNS, "line");
            myLine.setAttributeNS(null, "x1", x1);
            myLine.setAttributeNS(null, "y1", y1);
            myLine.setAttributeNS(null, "x2", x2);
            myLine.setAttributeNS(null, "y2", y2);
            myLine.setAttributeNS(null, "fill", "none");
            myLine.setAttributeNS(null, "stroke", color);
     
            idParent.appendChild(myLine);
        }
     
        function createSvgText(idParent, x, y, str, size, color, fontname, anchor) {
            var myText = document.createElementNS(svgNS, "text");
            myText.setAttributeNS(null, "x", x);
            myText.setAttributeNS(null, "y", y);
            myText.setAttributeNS(null, "fill", color);
            myText.setAttributeNS(null, "stroke", "none");
            myText.setAttributeNS(null, "font-family", fontname);
            myText.setAttributeNS(null, "font-size", size);
            myText.setAttributeNS(null, "text-anchor", anchor);
            myText.innerHTML = str;
     
            idParent.appendChild(myText);
        }
     
        function createSvgRect(idParent, x1, y1, x2, y2, color, enabled, id) {
            var w = x2 - x1;
            var h = y2 - y1;
            var myRect = document.createElementNS(svgNS, "rect");
            myRect.setAttributeNS(null, "x", x1);
            myRect.setAttributeNS(null, "y", y1);
            myRect.setAttributeNS(null, "width", w);
            myRect.setAttributeNS(null, "height", h);
            myRect.setAttributeNS(null, "fill", color);
            myRect.setAttributeNS(null, "stroke", "none");
            if (enabled) {
                myRect.setAttributeNS(null, "id", id);
                myRect.setAttributeNS(null, "class", "enabledinfobulle");
            }
     
            idParent.appendChild(myRect);
        }
     
        function createSvg(id, prog, title) {
            var idSvg = document.getElementById(id);
     
            while (idSvg.firstChild) {
                idSvg.firstChild.remove()
            }
     
            var gris = "#808080";
            var grisClair = "#C0C0C0";
            var noir = "#000000";
            var bleuclair = "#7cb6ec";
            var orange = "#f7a35c";
            var rouge = "#f45b5b";
     
            var font = "Segoe UI";
            var fontSize = "14";
     
            var titleX = 0;
            var titleY = 30;
     
            var i;
            var str;
            var strY = 12;
            var offsetGauche = 34;
            var offsetDroit = 15;
            var n = Math.floor((220 - offsetGauche - offsetDroit) / 24);
            var taille = n * 24;
     
            for (i = 0; i <= 24; i++) {
                var x = i * n + offsetGauche;
                if ((i % 6) == 0) {
                    createSvgLine(idSvg, x, 15, x, 27, gris);
                    if (i < 12) {
                        str = '0' + i + ':00';
                    } else {
                        str = i + ':00';
                    }
                    createSvgText(idSvg, x, strY, str, fontSize, gris, font, "middle");
                } else {
                    createSvgLine(idSvg, x, 20, x, 27, grisClair);
                }
            }
     
            createSvgText(idSvg, titleX, titleY, title, fontSize, noir, font, "start");
            createSvgRect(idSvg, offsetGauche, 28, taille + offsetGauche, 38, bleuclair, false, "");
     
            if (prog !== '') {
                var progs = prog.split(',');
                n = progs.length;
                if ((n % 3) == 0) {
                    for (i = 0; i < n; i += 3) {
                        var mode = progs[i];
                        var start = progs[i + 1];
                        var end = progs[i + 2];
                        nombres = start.split(':');
                        var debut = parseInt(nombres[0]) * 60 + parseInt(nombres[1]);
                        debut = offsetGauche + taille * debut / 1440;
                        nombres = end.split(':');
                        var fin = parseInt(nombres[0]) * 60 + parseInt(nombres[1]);
                        fin = offsetGauche + taille * fin / 1440;
                        if (mode == 'n') {
                            createSvgRect(idSvg, debut, 28, fin, 38, orange, true, start + " " + end);
                        } else {
                            createSvgRect(idSvg, debut, 28, fin, 38, rouge, true, start + " " + end);
                        }
                    }
                }
            }
        }
            
            /* n = température normal 20° (orange).
               c = température de confort 21° (rouge).
               bleuclair = pas de programation = température réduite = 19°
            */
               
            var items = ["c,02:30,10:30,n,11:30,16:00",
                                     "n,10:30,17:00",
                                     "n,09:30,18:00",
                                     "n,08:30,19:00",
                                     "n,07:30,20:00",
                                     "n,06:30,21:00",
                                     "n,05:30,22:00"];                               
                                     
                            createSvg("idHeaSch0", items[0], "<?php echo $jours[0];?>")
                            createSvg("idHeaSch1", items[1], "<?php echo $jours[1];?>")
                            createSvg("idHeaSch2", items[2], "<?php echo $jours[2];?>")
                            createSvg("idHeaSch3", items[3], "<?php echo $jours[3];?>")
                            createSvg("idHeaSch4", items[4], "<?php echo $jours[4];?>")
                            createSvg("idHeaSch5", items[5], "<?php echo $jours[5];?>")
                            createSvg("idHeaSch6", items[6], "<?php echo $jours[6];?>")
     
                            $infobulle = $(".infobulle");
     
                            $('.enabledinfobulle').hover(function() {
                                $infobulle.addClass('active');
                                $infobulle.html($(this).attr('id'));
                            }, function() {
                                $infobulle.removeClass('active');
                            });     
        $(document).on('mousemove', function(e) {
            $infobulle.css({
                left: e.pageX ,
                top: e.pageY - 50
            });
        });                                         
     
        </script>		
     
    </body>
     
    </html>

    Pouvez-vous m'aider ?

    Bien cordialement

  2. #2
    Membre confirmé
    Homme Profil pro
    Autre
    Inscrit en
    Juillet 2021
    Messages
    308
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : Juillet 2021
    Messages : 308
    Points : 612
    Points
    612
    Par défaut
    Bonjour,

    Commençons par le plus simple. Pour afficher l'opacité uniquement sur le fond, il ne faut pas utiliser la propriété opacity.
    A la place, utilise la fonction rgba() au lieu de la notation hexadécimale sur la propriété background / background-color :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    .infobulle, .background {
      /* 
      background: #ffffff;
      opacity: 0.8; 
      */
      background-color: rgba(255, 255, 255, 0.8);
    }
    Par contre, puisque la flèche de l'infobulle avec sa bordure est en fait une superposition de deux triangles css avec un fond uni, il n'est pas possible d'appliquer la transparence sur la partie blanche de la flèche (sinon on voit le triangle gris derrière qui simule la bordure).
    Dans ce cas je préfère laisser un fond blanc uni sur toutes l'infobulle et sa flèche plutôt qu'avoir la transparence que sur l'infobulle, mais c'est subjectif.

    L'astuce que tu utilises pour créer les triangles en css avec la propriété border fonctionne bien, mais en effet il n'est pas possible d'utiliser box-shadow avec ce genre de triangle css.
    L'ombre avec box-shadow est rectangulaire et ne prend pas en compte les bordures transparentes qui permettent de simuler le triangle.

    Une autre solution pour l'ombre serait d'utiliser le filtre drop-shadow() à la place de box-shadow sur l'infobulle.
    L'ombre devrait ainsi prendre en compte la forme des triangles.
    https://jsfiddle.net/w8kdvyft/1/

    Concernant le comportement étrange au mouvement de la souris, je n'ai pas réussi à reproduire ton problème.
    De mon coté les pseudo-éléments after et before de l'infobulle se déplace en même temps (essaye d'utiliser ::after et ::before au lieu de :after ou :before pour voir si ca change quelque chose).

    Ton rendu final n'est pas trop mal même si on voit effectivement une petite différence sur les bordures.
    Ceci est dû au fait que la bordure du triangle est en fait simulée via la superposition des deux triangles css décalés de 2px contrairement à la bordure de l'infobulle qui est définie via border: solid 1px color;
    Hélas je ne vois pas vraiment de solution à ceci, p-e jouer sur le décalage ou la taille de la bordure mais pas sûr qu'on puisse obtenir un rendu correct sur tous les navigateurs.

    Il existe éventuellement d'autres solutions pour créer un triangle : utiliser un caractère unicode, utiliser une image, etc.
    Par exemple une autre solution pourrait être de créer un carré avec une rotation de 45deg puis de masquer la moitié de ce carré pour faire apparaitre un triangle. On peut jouer sur la position du carré avec un overflow: hidden sur le parent pour réaliser ceci (voir https://css-tricks.com/triangle-with...ble-box-method).
    Démo : https://jsfiddle.net/n7Lm3bdy/
    Pour cette démo, j'ai dû ajouter un élément supplémentaire (.infobulle-pointer) dans l'infobulle pour masquer la moitié du carré avec la rotation.
    Ça ne me semble pas encore parfait mais avec une bordure sur ce carré, un box-shadow et la transparence sur l'infobulle et la flèche, on se rapproche de ta capture.
    Néanmoins la transparence sur la flèche fait légèrement apparaitre la bordure de l'infobulle juste derrière. A cause de ça, je préfère encore laisser un fond uni mais encore une fois c'est subjectif.

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Merci Pytet pour ces propositions.

    Voici une capture animée du comportement don je fais allusion :
    Attention, le zoom depuis le navigateur "Ctrl ++" au-delà de 110% inhibe le comportement.

    Nom : capturevdo.gif
Affichages : 258
Taille : 63,9 Ko

    Ce comportement se produit sur mes deux PCs.

    Si aucune solution / alternative est trouvée ici, je devrais effectivement me contenter d'un fond uni.
    J'essayais d'harmoniser avec mes autres Tooltips Highcharts.

    Bien cordialement.

    PS: ce comportement semble se produire uniquement sur le navigateur Chrome.
    -
    Dernière modification par Invité ; 06/05/2022 à 09h43.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    J'essayais d'harmoniser avec mes autres Tooltips Highcharts.
    attention toutefois Highcharts utilise du SVG, ce que tu pourrais peut-être utiliser pour tes infobulles.

    J'avais eu l'occasion, en son temps, fait pas mal d'essais sur la réalisation des infobulles et en avait tiré les mêmes constats/conclusions que Pytet qui a très bien expliqué tout cela.
    Il n'est pas simple de tout concilier, bordures, flèches et transparence, d'autant que la transparence peut vite amener à de l'illisibilité.

    Les infobulles avec flèches sont pour moi « épinglée » à un point particulier, exemple map, et dans bien des cas il n'est pas forcément judicieux de les utiliser, il en est de même pour leur repositionnement sur déplacement de la souris.

    Tout ceci étant depuis l'avènement du CSS3 et de part ses apports de pas mal de nouveautés, comme les linear-gradient ou autre variable CSS les choses sont plus « simples » à mettre en place. On n'est plus obligé de passer par moult élément HTML pour faire quelque chose de « propre ».

    Vous pourrez voir une solution à laquelle j'avais abouti sur cette page mise en forme pour l'occasion :

    Cela peut paraître compliqué au premier abord mais cela ne l'est pas

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour NoSmoking,

    Merci pour cette solution, dans mon cas, choix flèche en bas (bottom) l'effet du déplacement uniquement sur l'horizontal et très sympa !.
    Il persiste toute fois une petite zone nom transparente.

    Nom : Tooltip.JPG
Affichages : 243
Taille : 22,4 Ko

    Je ne parviens pas à adapter votre travail sur les "elementsLI" pour avoir le même comportement du Tooltip sur mes éléments "SvgRect".

    Code java : 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
    elementsLI.forEach((el, ind) => {
      el.append(bulles[ind]);
      el.addEventListener("mouseenter", (e) => {
        bulles[ind].style.opacity = 1;
      })
      el.addEventListener("mouseleave", (e) => {
        bulles[ind].style.opacity = 0;
      })
      el.addEventListener("mousemove", (e) => {
        const elem = bulles[ind];
        if (elem.className.indexOf("-center") > 0) {
          elem.style.left = e.offsetX + "px";
        }
        else if (elem.className.indexOf("-middle") > 0) {
          elem.style.top = e.offsetY + "px";
        }
      });
    });


    Bien cordialement

    PS:
    Citation Envoyé par NoSmoking Voir le message
    attention toutefois Highcharts utilise du SVG, ce que tu pourrais peut-être utiliser pour tes infobulles.
    Il serait possible d'utiliser un tooltip Highcharts sur un élément SVG ?
    Dernière modification par Invité ; 07/05/2022 à 17h31.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Il persiste toute fois une petite zone nom transparente
    Tout d'abord je n'a pas dis que cette méthode était exempte d'« imperfections »

    En fait il ne s'agit pas d'une zone transparente mais d'une zone traitée différemment et ce compte-tenu de la façon dont les moteurs de rendu traitent les couleurs pour fusionner les pixels en présence de couleurs avec opacité.

    Voir pour un aperçu rapide : <blend-mode>.

    Ceci dit on peut trouver facilement des couleurs/transparences pour lesquelles cela n'est pratiquement pas perceptible et si l'on ne zoome pas on ne s'en rendra même pas compte .

    Pour que ce phénomène n'apparaisse pas il faut que le fond soit sur le même couche, elle sera ainsi traitée de la même façon partout.

    D'autres techniques existent et sont tout autant performantes comme l'utilisation d'une backgroud-image au format SVG par exemple ou encore l'utilisation de bordure-image qui représente ton contour avec la flèche.
    Dans ce cas également quelques imperfections peuvent être observées


    Il serait possible d'utiliser un tooltip Highcharts sur un élément SVG ?
    Si ton graphe est généré par Highcharts, oui sinon non !
    Tu peux néanmoins créer ta propre tooltip en SVG.


    Je ne parviens pas à adapter votre travail
    C'est tout à fait normal, nous ne sommes pas dans le même contexte, dans mon exemple, qui n'est qu'un exemple de tooltip, chaque <LI> a sa propre infobulle donc le positionnement est relatif à chacun des éléments <LI>.
    Mais là cela n'a plus rien à voir avec le CSS.

  7. #7
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Merci à vous deux pour ces exemples et conseils, cela m'a permis de mieux comprendre les interactions entre les divers éléments qui constitue mon tooltip.

    Comme conseillé et vu la petite taille de mon tooltip, je vais rester sur un fond uni.

    Bien cordialement.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 16
    Dernier message: 29/01/2018, 11h06
  2. Réponses: 4
    Dernier message: 18/02/2007, 23h29
  3. Réponses: 2
    Dernier message: 17/07/2006, 14h06
  4. Réponses: 3
    Dernier message: 28/02/2006, 16h39
  5. [HTML] Positionnement d'une Tooltip
    Par rosask dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 27/07/2005, 18h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo