CSS/자바 스크립트의 마우스 오버/마우스 오버시 텍스트 상자 '팝업'표시

Question

텍스트가있는 html td 요소가 있습니다. 그 요소 위로 마우스를 가져 가면 활성 페이지/요소 상단에 텍스트 상자를 표시하여 해당 td 태그의 내용이 무엇을 의미하는지 설명 할 수 있습니다. 어떤 종류의 정교. <abbr> 태그와 같습니다.

CSS 또는 Javascript로이 작업을 수행 할 수 있습니까?

Answer 1

이것은 CSS와 자바 스크립트에서도 가능합니다. 요소와 테이블을 만듭니다

<table> 
<tr><td> 
    <a href="#">Info 
     <div class="tooltipcontainer"> 
      <div class="tooltip">Here some info</div> 
     </div> 
    </a> 
</td></tr> 
</table> 

CSS :

/* Container is necessary because td cannot be positioned relative */ 
td .tooltipcontainer { 
    position: relative; 
} 
td .tooltip { 
    display: none; 
    position: absolute; 
    /* More positioning, heigh, width, etc */ 
} 
td a:hover .tooltip { 
    display: block; 
} 

당신이 '정보'위에 마우스를 올려 때이 클래스 = '툴팁'와 사업부의 텍스트를 표시합니다. JavaScript (예 : 모든 jQuery 툴팁 플러그인)에는 더 많은 옵션이 포함 된 솔루션이 있습니다.

Answer 2

전에 Tooltip JS을 사용했습니다. 그것은 정말 잘 작동했고 나는 그것이 당신에게 유익 할 것이라고 생각합니다.

Answer 3

예 마크 업 ..

<td id="1">..</td> 
<td id="2">..</td> 
<td id="thisiswhatiwanttohaveahover"><div class="tooltip hidden"></div></td> 

CSS 스타일

.visible { 
    display:block; 
} 

.hidden { 
    display:none; 
} 

이 도움이

$('#thisiswhatiwanttohaveahover').hover(function() { 
    if ($(this + ' .tooltip').hasClass('hidden')) { 
    $(this + ' .tooltip').removeClass('hidden'); 
    $(this + ' .tooltip').addClass('visible'); 
    } 
    if ($(this + ' .tooltip').hasClass('visible')) { 
    $(this + ' .tooltip').removeClass('visible'); 
    $(this + ' .tooltip').addClass('hidden'); 
    } 
}); 

희망 ..