Tip alat pada gambar

132

Saya menggunakan tooltip. Tapi saya ingin itu di tag gambar, seperti ketika saya mouseover gambar maka tooltip akan berfungsi. Saya sudah mencoba tetapi tidak bekerja untuk saya di tag gambar.

html image tooltip pengguna1528786
sumber
Bahasa apa? HTML, C #, Java, ...?
Matthias
4
Gunakan document.getElementById('theImage').title='tooltip text'.
Jay
stackoverflow.com/questions/36275678/how-to-create-a-tooltip
Pooja Kedar
Masalahnya adalah tag <img> menutup sendiri, jadi Anda tidak dapat menambahkan elemen lain di dalamnya.
Justin

Jawaban:

352

Anda dapat menggunakan atribut judul gambar HTML standar untuk ini:

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

Saya mengatur Tip Alat pada Proyek Pekerjaan Saya Yang 100% Berfungsi

<!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>
Luaskan cuplikan

Paresh Shiyal
sumber
0

Menggunakan javascript, Anda dapat mengatur tooltips untuk semua gambar pada halaman.

<!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>
Luaskan cuplikan

Sushma Reddy
sumber
-6

Anda dapat menggunakan format berikut untuk menghasilkan tooltip untuk gambar. 

<div class="tooltip"><img src="joe.jpg" />
  <span class="tooltiptext">Tooltip text</span>
</div>
Hasshi Sudler
sumber
3
Anda melewatkan beberapa CSS untuk membuat ini benar-benar berfungsi. Jika Anda menambahkan kelas untuk .tooltip: hover .tooltiptext, dan posisikan .tooltiptext dengan benar, ini mungkin cara yang baik untuk menunjukkan tooltip di mana Anda memiliki kontrol lebih besar atas presentasinya.
LKM
Mereka mungkin mendasarkan pada sekolah-sekolah w3: w3schools.com/css/css_tooltip.asp Saya setuju ini solusi yang tidak lengkap, hanya menyediakan tautan bagi mereka yang ingin menempuh rute ini.
Justin