需要關於簡單CSS工具提示的建議

我需要關於簡單CSS工具提示的一些建議。我在一個表格中呈現的網站上有一個日曆。人們可以添加事件到這個日曆。我添加了CSS，因此當您將鼠標懸停在日期上時，它將顯示該日期的事件或事件。在該表中，我有這對於每一日期，電池與「事件」：需要關於簡單CSS工具提示的建議

<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（發現通過谷歌搜索技術）：

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; 
}

這適用於任何基於Mozilla的網頁瀏覽器;但是，當我轉移到Safari，Chrome或IE（我還沒有在Opera中嘗試過）時，它是無法實現的。一件事。工具提示框的大小似乎受限於表格單元的大小，使得我的事件遍佈整個地方。此外，工具提示框在「顯示」時的位置似乎與放置事件跨度的表格單元格相對，而不與日曆表格的右上方對齊。

有人可以看到我在做什麼錯嗎？這是不是也適用於Mozilla？是否還有其他非常簡單，輕量級的工具提示技術，我可以使用，你會建議？我試圖遠離JavaScript/JQuery /等。因爲我想保持這種光線，但如果我無法使用CSS來處理這些問題，則可能必須切換。任何和所有的建議表示讚賞。

感謝您花時間閱讀，祝您有美好的一天。 :-)

來源

2011-08-24 Brian

爲什麼不使用簡單的jQuery工具提示腳本。易於實施，並將在1分鐘內設置。在谷歌嘗試Tiptip或Qtip。將安全一段時間

來源

2011-08-24 15:07:27 Luuk

我曾希望避免JS，但我想我可能沒有選擇。謝謝。 – Brian

需要關於簡單CSS工具提示的建議

回答

相關問題