Tooltip sur plusieurs lignes

© Paladin. Document créé le 15 mai 2007 , mis à jour le 19 mai 2007.

Ce n'est pas pour me vanter, mais il fait rudement chaud. Eugène Labiche

Accueil du site > Astuces > HTML > Tooltip sur plusieurs lignes

(D)HTML / Firefox 2, IE7, Opera 9

Le comportement du tooltip, cette petite bulle d’information qui apparaît lorsque la souris survole un lien sur la page Internet, n’a pas le même comportement sous tous les navigateurs. Tour d’horizon.

Premier objectif : vérifier l’affichage de l’information contenue dans l’attribut d’un élément HTML.

Ligne de test :

<a style="position:absolute;right:0;bottom:0;" href="#" title="0123456789 B23456789 C23456789 D23456789 E23456789 F23456789 G23456789 H23456789 I23456789 J23456789 K23456789 L23456789">Exemple</a>

Cette ligne est fixée en bas et à droite de la fenêtre. Le contenu de l’attribut title est affiché dans la bulle d’information.

Quelques copies d’écran :

Tooltip sous Firefox 2 {PNG}

Tooltip sous IE 7 {PNG}

Tooltip sous Opera 9 {PNG}

- Firefox 2 coupe le texte au dela d’environ 70 caractères ;
- Internet Explorer 7 semble vouloir chasser à la ligne suivante au dela d’environ 40 caractères (à noter : la présence de l’ascenseur) ;
- Opera 9, dans sa grande générosité, chasse aux environs du 90ème caractère, rajoute une légende titre au titre, et rappelle le lien (contenu de href complété en lien absolu).

Code et tag HTML

L’utilisation d’un tag ’break" (br) pour chasser volontairement une ligne ne sert à rien dans cet attribut. Un code HTML sera, lui, correctement interprété :

<a style="position:absolute;right:0;bottom:0;" href="#" title="0123456789 <br /> &agrave; B23456789 C23456789 D23456789 E23456789 F23456789 G23456789 H23456789 I23456789 J23456789 K23456789 L23456789">Exemple</a>

donnera à peu prés le même résultat sous nos trois navigateurs :

Tooltip avec code et tag HTML sous IE7 {PNG}

où l’on peut voir le break inscrit en clair, et le code html (a avec son accent grave) interprété.

Le code ascii de "Line feed" (#10 en decimal) ne sera interprété que par IE 7 :

<a style="position:absolute;right:0;bottom:0;" href="#" title="0123456789 &#10;B23456789 &#10;C23456789 &#10;D23456789 &#10;E23456789 F23456789 G23456789 H23456789 I23456789 J23456789 K23456789 L23456789">Exemple</a>

Tooltip sous IE 7 avec code ascii de retour de ligne {PNG}

Tooltip en javascript

En exemple, à vous de compléter le script, où d’utiliser un des nombreux scripts disponibles sur le net (quelques liens en bas de page)...

Dans cet exemple, vous pouvez aisément modifier le tooltip, directement dans le définition CSS (le style). Le code javascript est largement commenté. Le résultat est identique pour nos trois navigateurs.

xtooltip (exemple de tooltip en javascript) {PNG}

Comme on peut le voir dans cet exemple, le tooltip tient compte ici de sa fenêtre. S’il est trop à droite, où trop en bas, le tooltip est repositionné pour ne pas disparaître sous les ascenseurs.

Le code DHTML/Javascript, suivi du fichier compressé :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
        Exemple Tooltip en Javascript
        http://www.quesaco.org/
        Tue May 15 07:54:23 CEST 2007
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemple de tooltip</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
html, body {
                /* force le body à prendre toute la hauteur */
        background: #0f0;
        height:100%;
        margin:0;
}
a {
        display:block;
        position:absolute;
        margin:1em;
        border:1px solid blue;
        padding:1em;
}
.top { top:0; }
.right { right:0; }
.bottom { bottom:0; }
.left { left:0; }

#xtooltipId {
        display:none;
        position:absolute;
        background: #0ff;
        width: 90px;
        border: 1px solid #666666;
        line-height:1.4em;
        padding:0 0.5ex;
        -moz-opacity:0.6; /* transparence pour Mozilla */
        opacity: 0.6; /* transparence opera */
}
-->
</style>
<!--[if IE]><style type="text/css">
#xtooltipId {
        filter:alpha(opacity=60); /* transparence pour IE */
}
</style><![endif]-->
<script language="JavaScript" type="text/javascript">
var xtooltip = {
        tooltip_id: null
        ,_x:null        // x y positions courantes
        ,_y:null
        ,_x_mouse:null
        ,_y_mouse:null
        ,_x_next:null
        ,_y_next:null
        ,_width:0
        ,_height:0
        ,
        init: function() {
                        // le title est recopié dans un ''faux'' attribut
                        // au chargement de la page, puis supprimé
                        // afin d'éviter l'affichage du tooltip standard
                for(i=0; i<document.links.length; i++){
                        title = document.links[i].getAttribute('title');
                        if(title && title.length) {
                                document.links[i].setAttribute("xtitle", title);
                                document.links[i].removeAttribute("title");
                        }  
                }
        },
                /* proto pour afficher xtooltip */
        show: function(me) {
                        // récupère l'objet xtooltip par son ID
                if(xtooltip.tooltip_id = (document.getElementById)
                        ? document.getElementById('xtooltipId')
                                : ((document.all) ? document.all['xtooltipId'] : false)) {
                        if(title = me.getAttribute("xtitle")) {
                                        // recopie le title du lien dans xtooltip
                                xtooltip.tooltip_id.innerHTML=title;
                                        // force l'affichage invisible en début de script
                                        // pour récupérer plus loin la hauteur correcte du xtooltip
                                if(xtooltip.tooltip_id.style.display!="block") {
                                        xtooltip.tooltip_id.style.visibility="hidden";
                                }
                                if(xtooltip.tooltip_id.style.display!="block") {
                                        xtooltip.tooltip_id.style.display="block";
                                }
                                xtooltip._width = xtooltip.tooltip_id.clientWidth;
                                xtooltip._height = xtooltip.tooltip_id.offsetHeight;
                                        // calcule les coordonnées de xtooltip
                                xtooltip._x_next =
                                    xtooltip.getOffsetPosition(me, "Left") + (me.offsetWidth / 2);
                                xtooltip._y_next =
                                    xtooltip.getOffsetPosition(me, "Top") + me.offsetHeight;
                                        // corrige les coordonnées si nécessaire
                                if((xtooltip._x_next + xtooltip._width) > document.body.clientWidth) {
                                        // si trop loin à droite de l'écran, aligne sur bord droit
                                        xtooltip._x_next =
                                            (document.body.clientWidth - xtooltip._width - (me.offsetWidth / 2));
                                }
                                if((xtooltip._y_next + xtooltip._height) > document.body.offsetHeight) {
                                        // si trop loin en bas de l'écran, aligne sur bord inférieur
                                        // A noter: le margin de l'objet qui est ignoré
                                        xtooltip._y_next =
                                            (document.body.offsetHeight - xtooltip._height - me.offsetHeight);
                                }
                                        // positionne xtooltip
                                if(xtooltip._x != xtooltip._x_next) {
                                        xtooltip._x = xtooltip._x_next;
                                        xtooltip.tooltip_id.style.left=(xtooltip._x)+"px";
                                }
                                if(xtooltip._y != xtooltip._y_next) {
                                        xtooltip._y = xtooltip._y_next;
                                        xtooltip.tooltip_id.style.top=(xtooltip._y)+"px";
                                }
                                        // affiche l'objet
                                if(xtooltip.tooltip_id.style.visibility!="visible") {
                                        xtooltip.tooltip_id.style.visibility="visible";
                                }
                        }
                }
        },
                /* proto pour cacher le xtooltip */
        hide: function() {
                if(xtooltip.tooltip_id) {
                        xtooltip.tooltip_id.style.display = "none";
                        xtooltip.tooltip_id = null;
                }
        },
                /* récupère le position absolue d'un objet */
        getOffsetPosition: function(objet, position) {
                var value = 0;
                var position = 'objet.offset' + position;
                while (objet && objet.tagName != 'BODY') {
                        value += eval(position);
                        objet = objet.offsetParent;
                }
                return(value);
        }
}

        // appelle lors du chargement de la page
        // pour initialiser les title
window.onload=function(){ xtooltip.init(); };  

</script>
</head>

<body>
<div id="bg">&nbsp;

        <!-- nos 4 liens répartis dans les
                4 coins de la page -->
<a class="top left" href="#"
        title="Lien dans coin gauche, haut de la page"
        onmouseover="xtooltip.show(this)"
        onmouseout="xtooltip.hide()"
        >Exemple A</a>
<a class="top right" href="#"
        title="Lien dans coin droit, haut de la page"
        onmouseover="xtooltip.show(this)"
        onmouseout="xtooltip.hide()"
        >Exemple B</a>
<a class="bottom left" href="#"
        title="Lien dans coin gauche, bas de la page"
        onmouseover="xtooltip.show(this)"
        onmouseout="xtooltip.hide()"
        >Exemple C</a>
<a class="bottom right" href="#"
        title="Lien dans coin droit, bas de la page"
        onmouseover="xtooltip.show(this)"
        onmouseout="xtooltip.hide()"
        >Exemple D</a>
</div>

        <!-- le xtooltip est ici -->
<div id="xtooltipId">Sera remplac&eacute; par le title du lien</div>

</body>
</html>
Zip - 2 ko
Code DHTML/Javascript de cet exemple

Plussoyez !

Les forums sont fermés.