카테고리 보관물: Html

Html

이미지의 툴팁 툴팁을 사용하고 있습니다. 그러나

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

답변

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

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

답변

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>
스 니펫 확장

답변

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

<!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>
스 니펫 확장

답변

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

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

답변