Comment faire pur css flottant info-bulles (position absolue span) de redimensionner dynamiquement pour accueillir le texte

J'ai récemment eu une idée pour utiliser les CSS pseudo-classe :hover pour afficher un style info-bulle lorsque la souris survole un lien.

Le code de base pour le lien ressemble à ceci:

CSS:

.hasTooltip {
    position:relative;
}
.hasTooltip span {
    display:none;
}

.hasTooltip:hover span {
    display:block;
    background-color:black;
    border-radius:5px;
    color:white;
    box-shadow:1px 1px 3px gray;
    position:absolute;
    padding:5px;
    top:1.3em;
    left:0px;   
    max-width:200px; /* I don't want the width to be too large... */
}

HTML:

<a href="#" class="hasTooltip">This link has a tooltip!<span>This is the tooltip text!</span></a>

Le résultat est exactement ce que je veux, mais avec un problème gênant: la durée de ne pas étendre pour accueillir le texte, et si je n'ai pas spécifier une largeur, le texte est écrasé.

J'ai fait quelques recherches sur Google, trouvé quelques exemples de travaux personnes avaient fait (cet exemple est creepily semblable à ce que j'ai reçu), mais personne ne semble avoir abordé les span largeur de problème, je vais avoir.

InformationsquelleAutor Titus | 2011-04-15
  1. 11

    Je sais que cette réponse est très en retard, mais il semble que la clé de votre problème serait d'utiliser:

    white-space: nowrap;

    à l'intérieur de votre portée, et de se débarrasser de toute sorte de la largeur de la définition. Bien sûr, l'inconvénient c'est que l'info-bulle ne seront en mesure de soutenir une seule ligne. Si vous voulez une solution multiligne, vous aurez très probablement de l'utilisation de javascript.

    Ici est un exemple de cette méthode:
    http://jsbin.com/oxamez/1/edit

    Un bonus supplémentaire est que cela fonctionne tout le chemin jusqu'à IE7. Si vous n'avez pas besoin de soutenir IE7, je dirais pliage la durée, et img styles dans un :avant et après la pour la .info-bulle. Ensuite, vous pouvez remplir le texte à l'aide de données* attribut.

    • Wow, bonne solution... merci! +1 pour la par exemple impressionnant aussi bien.
    • J'ai seulement besoin de l'appui seule ligne, de sorte que cette solution fonctionne très bien!, avez-vous une explication pourquoi white-space: nowrap devrait être utilisé si?
    • Si vous n'utilisez pas le "nowrap" le texte est renvoyé à la ligne à la largeur de la plus large du mot dans la chaîne. Depuis la bulle d'aide est défini comme un affichage de bloc lorsqu'il est activé, et n'a pas de régler la largeur, de l'annonce par défaut pour être aussi étroite que possible. 'nowrap' permet à l'info-bulle pour toujours être aussi large que le texte qu'il contient.
    InformationsquelleAutor schadeck
  2. 5

    Je ne pense pas qu'il y est une solution parfaite à ce problème avec pur CSS. Le premier problème est que lorsque vous placez le span à l'intérieur de la a tag de la span ne veut étendre aussi loin que la largeur de la liaison. Si vous placez le span après la a il est possible de se rapprocher de ce que vous essayez de faire, mais vous aurez à définir la margin-top: 1.3em, puis à définir une marge négative de glisser l'info-bulle à gauche. Cependant, il va y avoir un réglage fixe afin de ne pas s'asseoir exactement au début de chaque lien.

    Je fouettée jusqu'à un jQuery solution qui définit left dynamiquement (et un joli petit effet de fondu pour faire bonne mesure).

    Démo: http://jsfiddle.net/wdm954/9jaZL/7/

    
$('.hasTooltip').hover(function() {
    var offset = $(this).offset();
    $(this).next('span').fadeIn(200).addClass('showTooltip');
    $(this).next('span').css('left', offset.left + 'px');
}, function() {
    $(this).next('span').fadeOut(200);
});
    • Merci pour votre réponse! Même si je cherchais un pur CSS solution (et j'ai une assez bonne idée de la façon de le faire via JavaScript), je suis de l'acceptation de votre réponse, puisque vous êtes allé le mile supplémentaire pour expliquer pourquoi il est impossible de faire ce que je veux faire via le CSS, mais qu'il est possible avec certains jQuery magie. Merci pour la démo, trop... c'est très utile! 😀
    InformationsquelleAutor wdm
  3. 1

    Ces info-bulles peuvent également être intégrés dans un mot, appuyez sur thème facilement. Il suffit de copier le CSS dans votre style. Fichier Css et lors de la création de vos messages, il suffit de prendre l'aide de code HTML et de créer votre propre outil de conseils. Reste est tout de style, qui peut être modifié en fonction de votre propre choix. Vous pouvez également utiliser des images à l'intérieur de la pointe de l'outil boîtes.

    http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/

    InformationsquelleAutor Nabeela Ansari
  4. 0

    Même si cette question est un peu plus âgés, déjà, je vous suggère le compromis ci-après:

    Juste utiliser max-width: 200px; et min-width: 300%; ou alors,

    alors que le min-width pourrait entraîner plus élevé que le max-width.

    Juste le comprendre.

    De cette façon, vous n'auriez pas entièrement liquide, les info-bulles, mais la largeur serait une sorte de corrélation avec la largeur de l'élément de lien.

    En termes d'optique douceur, cette approche pourrait être de valeur.

    modifier:

    Eh bien, je dois admettre qu'il est absurde ce que j'ai écrit. Lorsque le min-width peut être plus élevé que le max-width, il n'y a pas de sens pour elle.
    Donc, il suffit de placer le min-width en%, pour atteindre ce que j'ai essayé de le suggérer.
    Désolé pour ça.

    InformationsquelleAutor noRiddle
  5. 0

    J'ai trouvé cela et il a travaillé pour moi. C'est une bonne solution quand vous avez beaucoup d'éléments et de plugins jquery sur la même page et vous ne pouvez pas travailler avec 

    <a href="#">Text <span>Tooltip</span></a>

    Vue pur CSS solution: JS BIN

    De crédit à trezy.com

    InformationsquelleAutor Adrian P.