Chú giải công cụ trên hình ảnh

132

Tôi đang sử dụng tooltip. Nhưng tôi muốn điều đó trên thẻ hình ảnh, giống như khi tôi di chuột qua hình ảnh thì tooltip sẽ hoạt động. Tôi đã thử nhưng không làm việc cho tôi trên thẻ hình ảnh.

html image tooltip

— người dùng1528786
nguồn

Ngôn ngữ nào? HTML, C #, Java, ...?

— Matthias

4

Sử dụng document.getElementById('theImage').title='tooltip text'.

— Jay

stackoverflow.com/questions/36275678/how-to-create-a-tooltip

— Pooja Kedar

Vấn đề là thẻ <img> tự đóng, vì vậy bạn không thể thêm một yếu tố khác bên trong nó.

— Justin

351

Bạn có thể sử dụng thuộc tính tiêu đề HTML tiêu chuẩn của hình ảnh cho việc này:

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

— Matthias
nguồn

3

Tôi đang đặt Tooltips cho dự án làm việc của tôi 100% đang hoạt động

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

Mở rộng đoạn trích

— Paresh Shiyal
nguồn

0

Sử dụng javascript, bạn có thể đặt chú giải công cụ cho tất cả các hình ảnh trên trang.

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

Mở rộng đoạn trích

— Sushma Reddy
nguồn

-6

Bạn có thể sử dụng định dạng sau để tạo một chú giải công cụ cho hình ảnh.

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

— Hasshi Sudler
nguồn

3

Bạn đang thiếu một số CSS để làm cho điều này thực sự hoạt động. Nếu bạn thêm một lớp cho .tooltip: hover .tooltiptext và vị trí .tooltiptext đúng cách, đây có thể là một cách tốt để hiển thị một tooltip nơi bạn có quyền kiểm soát nhiều hơn đối với phần trình bày của nó.

— LKM

Có lẽ họ đang dựa trên các trường w3: w3schools.com/css/css_tooltip.asp Tôi đồng ý rằng đó là một giải pháp không hoàn chỉnh, chỉ cung cấp liên kết cho những người muốn đi theo con đường này.

— Justin