CSS les info-bulles ne s'étire pas, ne peut avoir une largeur fixe

J'ai les info-bulles dont le contenu peut varier du très long au très court. Je ne veux pas avoir de 3 mots de contenu et ont une énorme bulle d'aide, mais je ne veux pas 20 mots et tout avoir froissés sur plusieurs lignes. Avec cette configuration actuelle, il reste bloqué à la largeur minimale indépendamment.

Le CSS:

.tooltip {
  outline: none; position: relative;
  min-width: 75px; max-width: 255px;
}

.tooltip .tool-content {
  opacity: 0; visibility: hidden;
  position: absolute;
}

.tooltip:hover .tool-content {
  background: #999; border: 1px solid #555; color: #000000;

  /* general styling */
  position: absolute; left: 1.3em; top: 2.6em; z-index: 99;
  visibility: visible; opacity: 1;
}

Le code HTML:

<div class='tooltip'>
(content to hover)
    <span class='tool-content'>
        (tooltip content)
    </span>
</div>

Ce qui me trouble c'est que je peux prendre hors position: relative et il fonctionne comme prévu! Pourtant, je ne trouve pas de travail autour de, et le positionnement relatif est (ou semble l'être?) pour avoir CSS plane.

Je suppose que tu veux dire, quand vous ne l'utilisez pas position:absolute; sur l'info-bulle, ça ne marchera pas? C'est parce que la taille de la bulle d'aide ne peut pas dépasser la taille de son conteneur, lorsqu'il est positionné relativement sans définir explicitement la largeur.
Semble bien pour moi dans IE9 et Chrome (pas sûr de savoir comment il se comporte dans tous les navigateurs ou les circonstances): jsfiddle.net/EE3Ys
En effet, je suis gêné de dire qu'il a fait un travail; pour cet exemple, j'ai supprimé ce que je pensais n'était pas nécessaire. L' .info-bulle a été attaché à un div qui avait une largeur définie et il était d'écraser l'info-bulle de la largeur. En le déplaçant d'un enfant de cet div résolu. Merci.

OriginalL'auteur Vael Victus | 2013-01-26

4
```
.tooltip {
  outline: none;
  position: relative;
  width: 75px;
  min-width: 75px;
  max-width: 255px;
}

.tooltip .tool-content {
  margin:0;
  padding:0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width:100%;
  height:100%;
}
```
Vous pouvez supprimer span et de le remplacer par un élément de niveau bloc (comme div avec style display:block)

Cela a permis de m'orienter un peu meilleure solution pour mon info-bulles, je vous remercie.
utiliser des divs au lieu de travées 😀 divs sont beaucoup flexible car vous pouvez directement utiliser display:block,display:inline etc styles 😀 merci pour upvote et en le marquant comme la réponse 😀
Oui, j'ai pris que la suggestion de votre part. :}

OriginalL'auteur GLES
1

Si le fait d'avoir une seule ligne info-bulle est fine pour vos besoins, vous pourriez tout aussi bien ajouter

white-space: pre à la .tool-content.

OriginalL'auteur Jacque Goupil
0

Vous pouvez simplement ajouter un max-width et de mettre en word-break: break-all ou word-wrap: break-word sur votre css sur l'élément ou dans son intérieur div.

OriginalL'auteur heero

Vous devez vous connecter pour publier un commentaire.