간단한 CSS 툴팁에 대한 조언 필요

간단한 CSS 툴팁에 대한 조언이 필요합니다. 테이블에 렌더링 된 사이트의 캘린더가 있습니다. 사람들은이 캘린더에 일정을 추가 할 수 있습니다. CSS를 추가하여 날짜 위로 마우스를 가져 가면 해당 날짜의 이벤트 또는 이벤트가 표시됩니다. 테이블 내에서, 내가 "이벤트"각 날짜 셀이 있습니다간단한 CSS 툴팁에 대한 조언 필요

td.eventDate { 
    position: relative; 
    z-index: 24; 
    background-color: #afafaf; 
    color: #000; 
    padding: 2px 4px 2px 4px; 
    text-align: right; 
    font-size: 36px; 
    font-family: Georgia; 
} 

td.eventDate:hover { 
    z-index: 25; 
    cursor: default; 
} 

td.eventDate span.tooltip { 
    display: none; 
} 

td.eventDate:hover span.tooltip { 
    display: block; 
    position: absolute; 
    top: 5.3em; 
    left: 28.5em; 
    width: auto; 
    color:#3e3e3e; 
    border:1px solid #3e3e3e; 
    background-color: #efefef; 
    padding: 4px 8px 4px 8px; 
    font-family: Candara, Tahoma, Geneva, sans-serif; 
    font-size: .4em; 
    font-weight: 700; 
    text-align: left; 
    z-index: 100; 
} 

span.noOfDays { 
    font-size: 11px; 
    padding: 0px 0px 0px 6px; 
}

<td class="eventDate" id="2011-08-24" title="2011-08-24"> 
    24 
    <span class="tooltip"> 
     <img class="infoImg" src="./images/info.png" width="16" height="16"> 
     <i>Today's Events</i>: 
     <br> 
     &#149; This is an event. 
     <span class="noOfDays">[ 3 days ]</span> 
    </span> 
</td>

그리고, 이것이 내가 내 CSS를 위해 무엇을 가지고 (Google 검색을 통해 기술을 발견)

Mozilla 기반 웹 브라우저에서 완벽하게 작동합니다. 그러나 Safari, Chrome 또는 IE (아직 Opera에서 시도하지 않았 음)로 이동하면 모두 불안정합니다. 한가지. 툴팁 상자의 크기가 테이블 셀의 크기로 제한되어 내 이벤트가 온통 포장됩니다. 또한 툴팁 박스가 "드러났을 때"의 위치는 이벤트 스팬이 배치 된 테이블 셀에 상대적으로 보이며 캘린더 테이블의 오른쪽 상단과 정렬되지 않습니다.

내가 뭘 잘못하고 있는지 누가 알 수 있습니까? 이것이 모질라에서도 작동하지 않아야합니까? 내가 사용할 수있는 매우 간단하고 가벼운 툴팁 기술이 있습니까? 나는 JavaScript/JQuery/등에서 멀리하려고 노력했다. 이 라이트를 유지하고 싶었 기 때문에 CSS를 사용할 수 없다면 전환해야 할 수도 있습니다. 모든 조언을 부탁드립니다.

시간을내어 읽어 주셔서 감사 드리며 좋은 하루 보내십시오. :-)

출처

2011-08-24 Brian

간단한 jquery 툴팁 스크립트를 사용하지 않는 이유는 무엇입니까? 구현하기 쉽고 1 분 이내에 설정됩니다. Google에서 Tiptip 또는 Qtip을 사용해보세요. 얼마 동안은 안전 할까?

출처

2011-08-24 15:07:27 Luuk

나는 JS를 피하기를 바랬지 만, 나는 선택의 여지가 없을 것 같다. 고맙습니다. – Brian

간단한 CSS 툴팁에 대한 조언 필요

답변

관련 문제