2010-07-30 4 views
0

간단한 CSS 전용 툴팁 만 사용하고 있습니다.CSS 전용 툴팁 문제

작업 예 CSS :

.tip 
{ 
    position:relative; 
} 
.tip span.tooltip 
{ 
    display:none; 
    background:#ff5112; 
    border:1px solid #9C0; 
} 
.tip:hover span.tooltip 
{ 
    display:block; 
    position:absolute; 
    top:2em; left:2em; width:15em; 
    border:1px solid #0cf; 
    background-color:#cff; color:#000; 
    text-align: center 
} 

HTML :

<span class="tip"> 
<table><tr> 
<td>Working Tip</td><span class="tooltip">Tip</span> 
</tr></table> 
</span> 

작동하지 예 : HTML :

<table><tr> 
<span class="tip"><td>Not working TIP</td><span class="tooltip">Tip</span></span> 
</tr></table> 

그리고 Live example

+0

무엇이 질문입니까? 나는 당신이 당신의 포맷을 잃어 버렸던 것처럼 당신이 당신의 코드를'code-block'에 포함시킬 필요가 있다고 생각합니까? – MrWhite

+0

게시물을 편집하고 코드 블록에 코드를 추가하십시오. 그렇지 않으면 작업 코드와 그렇지 않은 코드의 차이점을 볼 수 없습니다. –

+0

또한 IIRC, 범위 내에서 중첩 된 테이블은 허용되지 않습니다. 범위는 인라인이고 테이블은 블록입니다. – Psytronic

답변

4

문제는 표 요소입니다. <td>을 감쌀 수는 없습니다. 테이블을 제거하면 모든 것이 효과적입니다.

+0

테이블의 데이터에 대한 툴팁을 원했습니다. – abel

+0

그런 다음 모든 내용을 요소 안에 넣습니다. 일부 텍스트 툴팁. –

0

아마도 귀하의 질문을 볼 수는 있지만 질문은 생략되었으므로 촬영하겠습니다. 당신은 "팁"표 태그 다음에해야 전체 테이블을 포장하기 위하여려고하는 경우에

<span class="tip"> 
    <table> 
     <tr> 
      <td>Working Tip</td> 
     </tr> 
    </table> 
    <span class="tooltip">Tip</span> 
</span> 

: 당신이 정말로 그것을 비슷한 제품을 더해야 그 정도 뭔가를 원한다면 두 번째 예는 말-포맷됩니다.

+0

황소! 어떻게 그 포스트가 일어나고 "2"의 업을 얻었 는가? 그것은 이미 내 기분과 동시에 게시되었을 것임에 틀림 없다. 죄송합니다. – BrandonS

0

<span class="tooltip"> 요구

<table><tr> 
    <td class="tip"> 
    Working Tip 
    <span class="tooltip">Tip</span> 
    </td> 
</tr></table> 
1

나는 일이 솔루션을 하나의

0

추가하려고, 당신의 툴팁 CSS 클래스를 볼 수 없습니다 ... 예상대로 현재 CSS가 작동하려면 <td class="tip">의 내부 이동 나를 위해 :

<table><tr><td> 
<a href="blah.php" class="tip"> 
Blah Blah Text 
<span class="tooltip">Blah Blah Tip</span> 
</a> 
</td></tr></table> 

을하지만이 방법은 다음 추가 Mootools의 또는 스와 title 속성을 사용한다 갈 수 있도록 CSS를, 해제와 정말 나쁜 보인다 ch libs 상단에.

감사합니다.

1

스팬 내의 표를 허용하지 않으므로 수정 해주세요.