web-dev-qa-db-fra.com

Info-bulle avec contenu HTML sans JavaScript

Il existe de nombreuses bibliothèques basées sur JavaScript qui affichent des info-bulles lorsque vous pointez la souris sur une zone donnée d'une page Web. Certaines sont plutôt simples, d'autres permettent à l'info-bulle d'afficher du contenu HTML avec un style CSS.

Mais existe-t-il un moyen d'afficher une info-bulle de style sans utiliser JavaScript? Si vous n'utilisez que l'attribut title, les balises ne sont pas traitées (par exemple, foo<br />bar ne produit pas de saut de ligne). Je recherche une solution permettant d'afficher du contenu HTML stylé sans utiliser de JavaScript.

htmlcsstooltip
54
gaetanm

J'ai fait un petit exemple en utilisant 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;
}
<div class="hover">hover
  <div class="tooltip">asdadasd
  </div>
</div>

[~ # ~] violon [~ # ~]

http://jsfiddle.net/8gC3D/471/

68
koningdavid

Utilisation de l'attribut title:

<a href="#" title="Tooltip here">Link</a>
15
heytools

Similaire à koningdavid, mais fonctionne avec display: none et block, et ajoute un style supplémentaire.

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;
}
<div class="tooltip">
  hover_over_me
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>
7
Pawel

Celui-ci est très intéressant,

HTML et CSS uniquement

.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;
}
<span class="help-tip">
        <span > This is the inline help tip! </span>
</span>
5
Charan Ghate

CSS pur:

.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;
}
<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>
5
Marina

Vous pouvez utiliser l'attribut title, par exemple si vous voulez avoir une info-bulle sur un texte, faites juste:

<span title="This is a Tooltip">This is a text</span>
3
contradictioned

Une autre façon similaire de le faire en css:

#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%;
}
<p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p>

Essayez-le: http://jsfiddle.net/FdBu7/

Et voici quelques liens sur les transitions et les nouvelles façons de le faire: http://www.w3schools.com/css3/css3_transitions.asphttp://dev.opera.com/ articles/voir/css3-montrer-et-cacher /

3
NVRM

Ceci est ma solution pour cela:

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

L'élément reçoit un attribut "tooltip-title" avec le texte de l'info-bulle et il est affiché avec CSS en survol, je préfère cette solution car je n'ai pas à inclure le texte de l'info-bulle en tant qu'élément HTML!

0
Bryan Algutria