간단한 CSS 툴팁에 대한 조언이 필요합니다.

왜 이것이 작동하지 않는지 아무에게도 말해 줄 수 있는지 궁금합니다. 나는 간단한 CSS 툴팁 방법으로 작업을 해왔지만, 잠글 수없는 것 같습니다. Firefox에서는 툴팁이 다른 위치에 나타납니다. IE에서는 첫 번째 툴팁 만 작동합니다.간단한 CSS 툴팁에 대한 조언이 필요합니다.

감사합니다. 좋은 하루 보내세요.

</html> 
    </head> 
     <title> CSS Tooltip Test </title> 
     <style type="text/css"> 
      body {padding: 0px; margin: 0px; font: 80%; font-family: sans-serif;} 

      div.container {padding: 10px 10px 10px 25px; } 

      thead {background-color: #00f; color: #fff;} 

      th { text-align: center; padding: 4px 6px 4px 6px; } 

      td { text-align: center; padding: 4px 6px 4px 6px; } 

      a:link {text-decoration: none;} 
      a:hover {text-decoration: none;} 
      a:visited {text-decoration: none;} 

      a.myLink {position: relative; z-index: 24;} 
      a.myLink:hover {z-index: 25;} 
      a.myLink span.tooltip {display: none;} 
      a.myLink:hover span.tooltip {display: block; position: absolute; overflow: visible; top: 0em; left: 8em; width: 20em; color: #fff; background-color: #000; border: solid 1px #c6d880; padding: 2px 4px 2px 4px; font-family: serif; font-size: 1em; font-weight: 700; text-align: left; z-index: 100;} 

      td.myCell {position: relative; z-index: 24;} 
      td.myCell:hover {z-index: 25;} 
      td.myCell span.tooltip {display: none;} 
      td.myCell:hover span.tooltip {display: block; position: absolute; overflow: visible; top: 0em; left: 8em; width: 20em; color: #fff; background-color: #000; border: solid 1px #c6d880; padding: 2px 4px 2px 4px; font-family: serif; font-size: 1em; font-weight: 700; text-align: left; z-index: 100;} 

      button.myButton {position: relative; z-index: 24;} 
      button.myButton:hover {z-index: 25;} 
      button.myButton span.tooltip {display: none;} 
      button.myButton:hover span.tooltip {display: block; position: absolute; overflow: visible; top: 0em; left: 8em; width: 20em; color: #fff; background-color: #000; border: solid 1px #c6d880; padding: 2px 4px 2px 4px; font-family: serif; font-size: 1em; font-weight: 700; text-align: left; z-index: 100;} 
     </style> 
    </head> 
    <body> 
     <div class="container"> 
      <table border="1"> 
       <thead> 
        <tr><th> CSS Tooltip Test Table </th></tr> 
       </thead> 
       <tbody> 
        <tr><td><a class="myLink" href="http://www.google.com/" target="_blank"><span class="tooltip">this is a tooltip for cell 1</span>Go To Google</a></td></tr> 
        <tr><td class="myCell"><span class="tooltip">this is a tooltip for cell 2</span>This Is Cell 2</td></tr> 
        <tr><td><button class="myButton" type="submit"><span class="tooltip">this is a tooltip for cell 3</span>A Clicky Button</button></td></tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

출처

2011-09-02 Brian

http://jsfiddle.net/2jb3g/ – dkamins

고마워요,하지만 어떻게해야할지 모르겠군요. – Brian

당신은 뭔가 간단하고, 애니메이션을 만들 수 있습니다

<html> 
<head> 
    <style> 
     .animate { 
      -moz-transition: all 0.3s ease-out; /*FF3.7+*/ 
      -o-transition: all 0.3s ease-out; /*Opera 10.5*/ 
      -webkit-transition: all 0.3s ease-out; /*Saf3.2+, Chrome*/ 
      transition: all 0.3s ease-out; 
     } 
     /* Boton */ 
     .boton{position:relative;width:120px;height:100px;margin-top:60px;} 

     /* Tooltip initial statement */ 
     .tooltip{position:absolute;opacity:0;top:0px;right:0px;background-color:black;color:white;padding:4px;} 

     /*Hover Action*/ 
     .boton:hover .tooltip{opacity:0.9;top:-50px;right:0px;} 
    </style> 
    </head> 
<body> 
<div class="boton">Here is part of your text 
    <div class="tooltip animate">And here the tooltip content.</div> 
</div> 
</body> 
</html>

당신은 그것을 테스트 할 수 있습니다.

출처

2011-09-02 21:30:13

정말 멋집니다. 고맙습니다. 그러나 현재 IE에서 테스트 할 방법이 없으며 다른 Mac OS X 브라우저 인 Camino (http://caminobrowser.org/)에서 작동하지 않는 것으로 보입니다. 내가 말했듯이, 그게 정말 멋지다. 정말 고마워. – Brian

간단한 CSS 툴팁에 대한 조언이 필요합니다.

답변

관련 문제