Info-bulle sur l'image


132

J'utilise l'info-bulle. Mais je veux que sur la balise d'image, comme lorsque je passe la souris sur l'image, l'info-bulle devrait fonctionner. J'ai essayé mais ne travaille pas pour moi sur la balise d'image.


Quelle langue? HTML, C #, Java, ...?
Matthias

4
Utilisez document.getElementById('theImage').title='tooltip text'.
Jay


Le problème est que la balise <img> se ferme automatiquement, vous ne pouvez donc pas ajouter un autre élément à l'intérieur.
Justin

Réponses:


352

Vous pouvez utiliser l'attribut de titre HTML standard de l'image pour cela:

<img src="source of image" alt="alternative text" title="this will be displayed as a tooltip"/>

3

Je suis défini des info-bulles sur mon projet de travail qui fonctionne à 100%

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.size_of_img{
width:90px}
</style>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip"><img class="size_of_img" src="https://babeltechreviews.com/wp-content/uploads/2018/07/rendition1.img_.jpg" alt="Image 1" /><span class="tooltiptext">grewon.pdf</span></div>

<p>Note that the position of the tooltip text isn't very good. Check More Position <a href="https://www.w3schools.com/css/css_tooltip.asp">GO</a></p>

</body>
</html>


0

En utilisant javascript, vous pouvez définir des info-bulles pour toutes les images de la page.

<!DOCTYPE html>
<html>
    <body>
    <img src="http://sushmareddy.byethost7.com/dist/img/buffet.png" alt="Food">
    <img src="http://sushmareddy.byethost7.com/dist/img/uthappizza.png" alt="Pizza">
     <script>
     //image objects
     var imageEls = document.getElementsByTagName("img");
     //Iterating
     for(var i=0;i<imageEls.length;i++){
        imageEls[i].title=imageEls[i].alt;
        //OR
        //imageEls[i].title="Title of your choice";
     }
        </script>
    </body>
</html>


-6

Vous pouvez utiliser le format suivant pour générer une info-bulle pour une image.

<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip text</span>
</div>

3
Il vous manque du CSS pour que cela fonctionne réellement. Si vous ajoutez une classe pour .tooltip: hover .tooltiptext et positionnez correctement .tooltiptext, cela peut être une bonne façon d'afficher une info-bulle où vous avez plus de contrôle sur sa présentation.
LKM

Ils se basent probablement sur les écoles w3: w3schools.com/css/css_tooltip.asp Je suis d'accord que c'est une solution incomplète, fournissant simplement un lien pour ceux qui veulent emprunter cette voie.
Justin
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.