HTML 표의 셀에 대한 도구 설명 (자바 스크립트 없음)

JavaScript없이 표 셀에 대한 도구 설명을 가질 수 있습니까? 사용할 수 없습니다.

해봤 어?

<td title="This is Title">

Firefox v 18 (Aurora), Internet Explorer 8 및 Google Chrome v 23x에서 잘 작동합니다.

예. title유용성이 좋지 않은 셀 요소에 속성을 사용 하거나 CSS 도구 설명 (여러 기존 질문,이 질문의 중복 가능성)을 사용할 수 있습니다.

Mudassar Bashir가 "제목"속성을 사용하는 가장 높은 순위의 답변은이를 수행하는 가장 쉬운 방법 인 것처럼 보이지만 댓글 / 툴팁이 표시되는 방식을 제어 할 수있는 권한이 적습니다.

사용자 정의 툴팁 클래스에 대한 Christophe의 답변은 주석 / 툴팁의 동작을 훨씬 더 많이 제어하는 ​​것으로 보입니다. 제공된 데모에는 테이블이 포함되어 있지 않기 때문에 질문에 따라 다음은 테이블을 포함하는 데모입니다 .

스팬의 상위 요소 (이 경우 a)에 대한 "위치"스타일은 "상대"로 설정되어 주석이 표시 될 때 테이블 내용을 밀지 않도록해야합니다. 그것을 알아내는 데 약간의 시간이 걸렸습니다.

#MyTable{
  border-style:solid;
  border-color:black;
  border-width:2px
}

#MyTable td{
  border-style:solid;
  border-color:black;
  border-width:1px;
  padding:3px;
}

.CellWithComment{
  position:relative;
}

.CellComment{
  display:none;
  position:absolute; 
  z-index:100;
  border:1px;
  background-color:white;
  border-style:solid;
  border-width:1px;
  border-color:red;
  padding:3px;
  color:red; 
  top:20px; 
  left:20px;
}

.CellWithComment:hover span.CellComment{
  display:block;
}

<table id="MyTable">
  <caption>Cell 1,2 Has a Comment</caption>
  <thead>
    <tr>
      <td>Heading 1</td>
      <td>Heading 2</td>
      <td>Heading 3</td>
    </tr>
  </thead>
  <tbody>
    <tr></tr>
      <td>Cell 1,1</td>
      <td class="CellWithComment">Cell 1,2
        <span class="CellComment">Here is a comment</span>
      </td>
      <td>Cell 1,3</td>
    <tr>
      <td>Cell 2,1</td>
      <td>Cell 2,2</td>
      <td>Cell 2,3</td>
    </tr>
  </tbody>
</table>

css 및 : hover 의사 속성을 사용할 수 있습니다. 다음은 간단한 데모 입니다. 다음 CSS를 사용합니다.

a span.tooltip {display:none;}
a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;}

이전 브라우저는 : hover를 제한적으로 지원합니다.

BioData41이 추가 한 것의 진화 ...

다음을 CSS 스타일로 배치

     <style>

        .CellWithComment{position:relative;}

        .CellComment
        {
            visibility: hidden;
            width: auto;
            position:absolute; 
            z-index:100;
            text-align: Left;
            opacity: 0.4;
            transition: opacity 2s;
            border-radius: 6px;
            background-color: #555;
            padding:3px;
            top:-30px; 
            left:0px;
        }   
        .CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;}
</style>

그런 다음 다음과 같이 사용하십시오.

        <table>
            <tr>
                <th class="CellWithComment">Category<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
                <th class="CellWithComment">Code<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
                <th>Opened</th>
                <th>Event</th>
                <th>Severity</th>           
                <th>Id</th>
                <th>Component Name</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>

if (data[j] =='B'){
    row.cells[j].title="Basic";
}

Java 스크립트에서 Data 값을 비교하여 조건부로 제목을 추가합니다. 테이블은 Java 스크립트에 의해 동적으로 생성됩니다.