css - Info-bulle avec du contenu HTML sans JavaScript

67

J'ai fait un petit exemple d'utilisation de css

CSS:
```
.hover {
  position: relative;
  top: 50px;
  left: 50px;
}

.tooltip {
  /* hide and position tooltip */
  top: -10px;
  background-color: black;
  color: white;
  border-radius: 5px;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.hover:hover .tooltip {
  /* display tooltip on hover */
  opacity: 1;
}
```
HTML:
```
<div class="hover">hover
  <div class="tooltip">asdadasd
  </div>
</div>
```
VIOLON

http://jsfiddle.net/8gC3D/471/
- Veuillez ajouter le code dans votre réponse. Le violon est toujours bon de démontrer les résultats.
- Fait! 🙂
- Parfait, c'est exactement ce que je voulais! Merci!
- Cela ne fonctionne pas très bien. Si vous passez .tooltip sans planant .hover l'info-bulle apparaît. J'ai donc suggéré d'ajouter visibility: hidden/visible pour éviter cela.
- Merci pour votre suggestion, c'est ajouté
- Attendez, est-ce vraiment possible?? Je m'attendais à un tas de "non, vous ne pouvez pas" répond quand je suis venu à partir de google, mais au lieu de cela je suis plus sage. Merci monsieur koningdavid. 🙂 La version de HTML/CSS est-ce? Seulement CSS3 ou l'ont été autour depuis des siècles? Tous les inconvénients de cette par rapport à Javascript/JQuery?
- Salut Kenneth, l'effet de transition est CSS3, dans les anciens navigateur, il va travailler, juste sans transition!
- Comment pourrait-planant info-bulle faire de l'info-bulle apparaisse? La règle CSS est: .hover:hover .info-bulle, il est donc /stationnaire/ qui doit être plané.
- En dehors de cela, lorsque vous ajoutez de la visibilité, l'info-bulle s'arrête de fonctionner sur Chrome sur windows 7 (je n'ai pas vérifier les autres navigateurs).
- si vous passez un enfant, le parent est planait trop. Dans ce cas, l'enfant était en dehors de la mère, mais c'est toujours son enfant. Seulement un opacity ne fera pas l'enfant à disparaître (et vous pourriez passez-il) comme visibility n'.
- c'est parce que d'essayer de l'animer tout au lieu de simplement animer opacity: jsfiddle.net/8gC3D/412
- Je vois... merci pour l'explication. Mais de toute façon, les règles avec visibility n'a pas fonctionné pour moi sur Chrome Win7...
- Yep, j'ai remarqué que, il l'habitude de travailler mais ne le fait plus! J'ai enlevé la visibilité, merci pour votre suggestion
- C'est vraiment génial. Merci
- Sympa, mais comment pouvons-nous exclure .info-bulle en vol stationnaire zone de .passez la souris?
- J'ai été en utilisant ce pendant un certain temps - toujours pense que c'est une solution élégante - mais suis tombé sur un problème avec la gestion de chevauchement des info-bulles aujourd'hui, donc posté un nouvelle question.
- Mise à jour: trouvé solution qui permet de résoudre mon problème - utiliser les deux opacity et visibility.
- Vous avez fait ma journée.
- Comme @AmosM.Charpentier pointue, vous devez ajouter: visibility: hidden; à .tooltip classe et visibility: visible; à .hover:hover .tooltip classe. Sinon, l'info-bulle s'affiche lorsque vous passez la souris .hover mais aussi lorsque vous passez .tooltip qui va provoquer un comportement indésirable (spécialement si votre zone info-bulle n'est pas petite)
- Je ne vois pas comment cette réponse adresses de l'OP question - je m'attendais à voir une info-bulle qui contenu HTML. La réponse utilise le CSS pour le style de l'info-bulle de l'apparence dans sa globalité, mais vous ne pouvez pas avoir (par exemple), des tableaux, des images, des hyperliens, des mots gras etc.
InformationsquelleAutor koningdavid
14

À l'aide de la titre attribut:
```
<a href="#" title="Tooltip here">Link</a>
```
- Bonne idée, mais ça ne contenir du texte, pas de contenu html, comme l'OP veut.
InformationsquelleAutor heytools

Similaire à koningdavid, mais fonctionne sur display:none et le bloc, et apporte encore plus de style.

CSS:

div.tooltip {
  position: relative;
  /*  DO NOT include below two lines, as they were added so that the text that
        is hovered over is offset from top of page*/
  top: 10em;
  left: 10em;
  /* if want hover over icon instead of text based, uncomment below */
  /*    background-image: url("../images/info_tooltip.svg");
            /!* width and height of svg *!/
            width: 16px;
            height: 16px;*/
}


/* hide tooltip */

div.tooltip span {
  display: none;
}


/* show and style tooltip */

div.tooltip:hover span {
  /* show tooltip */
  display: block;
  /* position relative to container div.tooltip */
  position: absolute;
  bottom: 1em;
  /* prettify */
  padding: 0.5em;
  color: #000000;
  background: #ebf4fb;
  border: 0.1em solid #b7ddf2;
  /* round the corners */
  border-radius: 0.5em;
  /* prevent too wide tooltip */
  max-width: 10em;
}

HTML:

<div class="tooltip">
  hover_over_me
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>

Bon point que vous avez changé de opacity:0 à display:none . Sinon, vous obtenez l'effet étrange de voir l'info-bulle lorsque vous placez le curseur autour de l'élément, comme vous êtes en vol stationnaire sur l'info-bulle, même si cela n'est pas visible.

InformationsquelleAutor Pawel

C'est très intéressant,

HTML et CSS

CSS:

.help-tip {
position: absolute;
top: 18px;
left: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before {
content: '?';
font-weight: bold;
color: #fff;
}
.help-tip:hover span {
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip span {
display: none;
text-align: left;
background-color: #1E2021;
padding: 5px;
width: 200px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
left: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip span:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
left: 10px;
top: -12px;
}
.help-tip span:after {
width: 100%;
height: 40px;
content: '';
position: absolute;
top: -40px;
left: 0;
}

HTML:

<span class="help-tip">
<span > This is the inline help tip! </span>
</span>

InformationsquelleAutor Charan Ghate

3

Vous pouvez utiliser l'attribut title, par exemple, si vous voulez avoir une info-bulle sur un texte, il suffit de faire:
```
<span title="This is a Tooltip">This is a text</span>
```
- "Bonne idée, mais ça ne contenir du texte, pas de contenu html, comme l'OP veut."
InformationsquelleAutor contradictioned

Une autre façon de le faire en css:

<style>
#img {  }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;
}
#hoverme:hover { background-color:green;position:absolute ;left:300px;top:100px;width:40%;height:20%;}
</style>
<p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p>

Essayer: http://jsfiddle.net/FdBu7/

Et voici quelques liens sur les transitions et les nouvelles façons de faire:
http://www.w3schools.com/css3/css3_transitions.asp
http://dev.opera.com/articles/view/css3-show-and-hide/

Il ne fonctionne pas bien sur Chrome/Win7 - les images sont clignotant/retournement

InformationsquelleAutor Cryptopat

Pur CSS:

CSS:

.app-tooltip {
position: relative;
}
.app-tooltip:before {
content: attr(data-title);
background-color: rgba(97, 97, 97, 0.9);
color: #fff;
font-size: 12px;
padding: 10px;
position: absolute;
bottom: -50px;
opacity: 0;
transition: all 0.4s ease;
font-weight: 500;
z-index: 2;
}
.app-tooltip:after {
content: '';
position: absolute;
opacity: 0;
left: 5px;
bottom: -16px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent;
transition: all 0.4s ease;
}
.app-tooltip:hover:after,
.app-tooltip:hover:before {
opacity: 1;
}

HTML:

<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>

très astucieux: contenu: attr(données-titre);

InformationsquelleAutor Marina

0

C'est ma solution pour cela:

https://gist.github.com/BryanMoslo/808f7acb1dafcd049a1aebbeef8c2755

L'élément recibes une "info-bulle-titre" de l'attribut avec le texte d'info-bulle et il est affiché avec CSS sur le vol stationnaire, je préfère cette solution car je n'ai pas d'inclure le texte d'info-bulle comme un élément HTML!
- Hésitez pas à placer le code dans une balise code ainsi, juste au cas où quelque chose arrive jamais à le lien, et juste pour le rendre plus facilement disponibles sur ce site.
InformationsquelleAutor Bryan Algutria

Vous devez vous connecter pour publier un commentaire.