需要关于简单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工具提示的建议

回答

相关问题