Comment créer des info-bulle sans JavaScript en utilisant uniquement CSS?

Je suis en train de créer une info-info-bulle à l'aide de CSS sans JavaScript.

C'est le code que j'ai maintenant

<a href="#" 
style="{position:relative; top:50px; left:50px;}
       :hover span {opacity:1; visibility:visible;}">
  hover text
  <span 
  style="top:-10px; background-color:black; color:white; border-radius:5px; opacity:0; position:absolute; -webkit-transition: all 0.5s; -moz-transition:  all 0.5s; -ms-transition: all 0.5s; -o-transition:  all 0.5s; transition:  all 0.5s; visibility:hidden;">
    tooltip text
  </span>
</a>

En fonction de ce qu'il devrait être autorisé: http://www.w3.org/TR/2002/WD-css-style-attr-20020515

Je sais que ce n'est pas la méthode recommandée pour le faire, mais il doit être possible dans les cas où seulement du CSS peut être utilisé.

Ce lien vous donnera votre réponse: LIEN

OriginalL'auteur Kyra | 2013-10-02

  1. 8

    Vous étiez assez proche, j'ai ajouté quelques propriétés:

    Balisage HTML:

    <a href="#" class="tooltip">hover text
  <span>tooltip thisIsALongTextMadeToBeBreak</span>
</a>

    CSS Balisage:

    a.tooltip {
    position: relative; 
    top: 50px; 
    left: 50px;
}

a.tooltip:hover span {
    opacity: 1; 
    visibility: visible;
}

a.tooltip span {
    padding: 10px;
    top: 20px;     
    min-width: 75px;
    max-width: 150px;
    background-color: #000000; 
    color: #FFFFFF;
    height: auto;
    border-radius: 5px; 
    opacity: 0; 
    position:absolute;
    visibility: hidden;
    word-wrap: break-word;
    -webkit-transition: all 0.5s; 
       -moz-transition: all 0.5s; 
        -ms-transition: all 0.5s; 
         -o-transition: all 0.5s; 
            transition: all 0.5s;    
}

    Voici une démo en live si vous voulez le vérifier

    Si vous le souhaitez, vous pouvez vérifier certains plus d'exemples et d'idées ici

    Espère que cela aide!

    OriginalL'auteur Luis

  2. 0

    essayez cet exemple.....

    a.tooltip {
outline:none;
}
a.tooltip strong {
line-height:30px;
}
a.tooltip:hover {
text-decoration:none;
}
a.tooltip span {
z-index:10;
display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:240px;
line-height:16px;
 }
 a.tooltip:hover span {
display:inline;
position:absolute;
color:#111;
border:1px solid #DCA;
background:#fffAF0;
 }
.callout {
z-index:20;
position:absolute;
top:30px;
border:0;
left:-12px;
 }
/*CSS3 extras*/
a.tooltip span {
border-radius:4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #CCC;
-webkit-box-shadow: 5px 5px 8px #CCC;
box-shadow: 5px 5px 8px #CCC;
}

    ci-dessus css créer une info-bulle ...

    pour la démo
    JsFiddle démo

    OriginalL'auteur Sindhu