Infobulle CSS et overflow: scroll

Question

Tanatiel

27 Sep 2011 à 17:26

Bonjour tout le monde,

pour les besoin d'une application avec client léger HTML (navigateur IE6), il a été nécessaire de mettre en oeuvre les infobulles CSS pour l'affichage de description longues. Tout va bien sauf dans une page où on affiche un tableau d'éléments. Ce tableau est limité verticalement en affichage par un overflow-y: scroll. Le problème rencontré est que les infobulles pouvant être longues (800 caractères), comment faire pour qu'elles dépassent de l'overflow vers le bas? Ce serait la solution idéale qui résoudrait tous les problèmes.

Attention: pas de javascript, c'est une contrainte exprimée.

Voici le CSS:


div.det_scrolltable {
	height:expression(this.scrollHeight > 150? "150px": "auto" );
	overflow-x:hidden;
	overflow-y:scroll;
	position: relative;
}

.info {
  position: relative;
  text-decoration: none !important;
  z-index: 24;
  color: blue !important;
}

.info span {
  display: none;
}

.info:hover {
  z-index:25;
  background: none; /* correction d'un bug IE */
  cursor: default !important;
  background: #fff !important;
}

.info:hover span {
  display:block;
  position:absolute;
  top:2em; 
  left:2em; 
  width:15em;
  border:1px solid #000;
  background-color: lightyellow;
  color:#000;
  text-align: justify;
  font-weight:none;
  padding:5px;
  margin: 5px;
}

.info:hover .last {
  top:-1em; 
}

Et le code HTML:


<body>
	<div class="det_groupe_modules">
		<div class="row"></div>
		<div class="det_module">
			<div class="det_module_titre">Titre bloc&nbsp;</div>
			<div class="det_module_contenu det_scrolltable">
        <table summary="Liste">
          <thead>
            <tr><th class="sortable">Col 1</th><th class="sortable">Col 2</th><th class="sortable">Col 3</th><th class="sortable">Col 4</th><th class="sortable">Col 5</th><th class="sortable">Col 6</th></tr>
          </thead>
          <tbody>
            <tr class="odd">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 1</span>libellé 1</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">Sa</td><td scope="col">09:00-12:00</td><td scope="col">12:00</td><td scope="col"></td>
            </tr>
            <tr class="even">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 1</span>libellé 1</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">LuMeJe</td><td scope="col">09:00-12:00 13:30-17:30</td><td scope="col">16:00</td><td scope="col"></td>
            </tr>
            <tr class="odd">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 1</span>libellé 1</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">Ma</td><td scope="col">09:00-12:00 14:00-17:30</td><td scope="col">16:00</td><td scope="col"></td>
            </tr>
            <tr class="even">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 1</span>libellé 1</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">Ve</td><td scope="col">09:00-16:00</td><td scope="col">16:00</td><td scope="col"></td>
            </tr>
            <tr class="odd">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 3</span>libellé 3</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">LuMaMeJeVe</td><td scope="col">09:00-12:00 13:30-17:30</td><td scope="col"></td><td scope="col"></td>
            </tr>
            <tr class="even">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 3</span>libellé 3</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">Sa</td><td scope="col">09:00-12:00</td><td scope="col"></td><td scope="col"></td>
            </tr>
            <tr class="odd">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 4</span>libellé 4</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">Sa</td><td scope="col">09:00-12:00</td><td scope="col"></td><td scope="col">12:00</td>
            </tr>
            <tr class="even">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 4</span>libellé 4</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">Ma</td><td scope="col">09:00-12:00 14:00-17:30</td><td scope="col"></td><td scope="col">16:00</td>
            </tr>
            <tr class="odd">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 4</span>libellé 4</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">LuMeJe</td><td scope="col">09:00-12:00 13:30-17:30</td><td scope="col"></td><td scope="col">16:00</td>
            </tr>
            <tr class="even">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 4</span>libellé 4</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">Ve</td><td scope="col">09:00-17:30</td><td scope="col"></td><td scope="col">16:00</td>
            </tr>
            <tr class="odd">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 2</span>libellé 2</a></td>
              <td scope="col">01/01 au 31/10</td><td scope="col">Sa</td><td scope="col">09:00-12:30</td><td scope="col"></td><td scope="col"></td>
            </tr>
            <tr class="even">
              <td scope="col"><a class="info" href="javascript: void(0)"><span>Description de libellé 2</span>libellé 2</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">LuMeJe</td><td scope="col">09:00-12:00 13:30-17:30</td><td scope="col"></td><td scope="col"></td>
            </tr>
            <tr class="odd">
              <td scope="col"><a class="info" href="javascript: void(0)"><span class="last">Description de libellé 2</span>libellé 2</a></td>
              <td scope="col">01/01 au 31/12</td><td scope="col">Ma</td><td scope="col">09:00-12:00 14:00-17:30</td><td scope="col"></td><td scope="col"></td>
            </tr>
          </tbody>
        </table>
			</div>
		</div>
	</div>
</body>

Merci d'avance

hchtot

27 Sep 2011 à 19:43

Salut Tanatiel,

T'as sûrement déjà étudié la question mais pourquoi ne pas positionner l'infobulle un peu plus haut comme tu le fais pour la dernière ligne du tableau ?

Sinon n'as-tu pas moyen d'augmenter le height de ton div.det_scrolltable ?

Sinon, sans javascript, ça me parait un peu compliqué...

Tanatiel

28 Sep 2011 à 11:09

Bonjour hchtot et merci pour ton intervention,

j'ai effectivement réfléchi à ça mais d'autres problèmes se posent:
- la hauteur des infobulles pouvant varier, à partir de quelle ligne puis-je faire le décalage?
- quand on scroll, l'infobulle de la dernière ligne affichée du tableau est invisible ou coupée. C'est surtout ce point qui est problématique.
- je ne peux pas changer la hauteur de mon tableau pour qu'il ne soit plus scrollable. C'est un tableau à hauteur variable qui peut contenir un grand nombre d'enregistrements et il est souhaité qu'il n'occupe pas plus d'un certain espace sur la page d'où le overflow-y: scroll.

Pour info ma page est générée à partir de servlets sous STRUTS, je peux éventuellement agir en amont de la création du code HTML donc mais je suis assez limité dans ce que je peux faire, à priori.

Cordialement
Modifié par Tanatiel (28 Sep 2011 - 11:10)

fvsch

28 Sep 2011 à 12:41

Bonjour,

La seule solution efficace serait d'utiliser JavaScript.

Pour les pistes restantes:
1. Déterminer si l'élément survolé est vers le haut ou le bas de la zone affichée dans une boite en overflow:scroll: impossible en CSS seul.
2. Faire dépasser un élément d'un conteneur en overflow:scroll: c'est possible avec un élément positionné en absolu si et seulement si le plus proche ancêtre positionné est en dehors du conteneur (et ça, c'est vrai dans les navigateurs modernes mais pas sûr du tout que ça passe dans IE6).

Il y a peut-être un coup à jouer en retirant le position:relative de tes liens et en tâchant de placer tes infobulles grâce à des marges par exemple, mais IE6 est notoirement peu fiable sur ce type d'usage du positionnement absolu.

PS: je suis heureux de pas avoir ton job. Smiley biggol

Modifié par fvsch (28 Sep 2011 - 12:42)

Tanatiel

30 Sep 2011 à 10:54

Merci fvsch,

je vais faire un essai en enlevant le position: relative de mes liens mais je pense que ça va effectivement avoir des effets bizarres, sachant que j'ai dû mettre le div avec le scroll en position : relative car sinon IE6 ne savait pas gérer à la fois un overflow et un hover correctement.

Cordialement.

PS: c'est plus un problème de client que de job Smiley cligne

En général j'arrive à les persuader d'abandonner un navigateur archaïque mais là il n'y a pas moyen.

felix79

24 Oct 2011 à 11:55

Bonjour

Moi j'ai exactement le même problème mais j'ai droit au javascript !
Quelle est la solution ?

Merci d'avance !

fvsch

24 Oct 2011 à 14:20

felix79 a écrit :
Quelle est la solution ?

Un élément positionné en absolu, et généré dans le DOM au début ou à la fin de BODY par exemple.

Sujet clos

CSS et mise en forme, CSS3

Infobulle CSS et overflow: scroll