Tooltip sur plusieurs lignes
© . Document créé le 15 mai 2007 , mis à jour le 19 mai 2007.
L'amour... il y a ceux qui en parlent et il y a ceux qui le font. A partir de quoi il m'apparaît urgent de me taire. Pierre Desproges
Accueil du site > Astuces > HTML > Tooltip sur plusieurs lignes
(D)HTML / Firefox 2, IE7, Opera 9
Mots-clés
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 :
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 /> à 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 :
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 B23456789 C23456789 D23456789 E23456789 F23456789 G23456789 H23456789 I23456789 J23456789 K23456789 L23456789">Exemple</a>
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.
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">
<!-- 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é par le title du lien</div>
</body>
</html>
- Code DHTML/Javascript de cet exemple
A noter:
Plussoyez !
Les forums sont fermés.
RSS 2.0
