이미지의 툴팁

132

툴팁을 사용하고 있습니다. 그러나 이미지 위에 마우스를 올리면 툴팁이 작동해야합니다. 이미지 태그에서 시도했지만 작동하지 않습니다.

html image tooltip

— 사용자 1528786
소스

어떤 언어? HTML, C #, Java, ...?

— Matthias

4

사용하십시오 document.getElementById('theImage').title='tooltip text'.

— Jay

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

— Pooja Kedar 2016 년

문제는 <img> 태그가 자동 닫히기 때문에 그 안에 다른 요소를 추가 할 수 없다는 것입니다.

— 저스틴

351

이를 위해 이미지의 표준 HTML 제목 속성을 사용할 수 있습니다.

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

— 마티아스
소스

3

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

자바 스크립트를 사용하면 페이지의 모든 이미지에 대한 툴팁을 설정할 수 있습니다.

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

다음 형식을 사용하여 이미지의 툴팁을 생성 할 수 있습니다.

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

— Hasshi Sudler
소스

3

실제로 작동시키는 CSS가 없습니다. .tooltip : hover .tooltiptext에 대한 클래스를 추가하고 .tooltiptext를 올바르게 배치하면 프리젠 테이션을보다 잘 제어 할 수있는 툴팁을 표시 할 수 있습니다.

— LKM

그들은 아마도 w3 학교를 기반으로 할 것입니다 : w3schools.com/css/css_tooltip.asp 나는이 길을 가고 싶은 사람들에게 링크를 제공하는 불완전한 해결책이라는 데 동의합니다.

— 저스틴