Question

我需要一些简单的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的Web浏览器;然而，当我转移到Safari，Chrome或IE（我还没有在Opera中尝试过它）时，它都是不可思议的。一方面。工具提示框的大小似乎受限于表格单元格的大小，使我的事件遍布整个地方。此外，工具提示框在“显示”时的定位似乎与放置事件跨度的表格单元格相关，而不是与日历表格的右上角对齐。

有人能看出我做错了什么吗？这不应该在Mozilla中工作吗？有没有其他非常简单，轻量级的工具提示技术我可以使用你建议吗？我试图远离JavaScript / JQuery /等。因为我想保持这个非常轻，但如果我不能使用CSS，我可能不得不切换。任何和所有建议都表示赞赏。

感谢您花时间阅读，并度过了美好的一天。： - ）

Answer 1

为什么不使用简单的jquery工具提示脚本。易于实施，将在1分钟内完成设置。在谷歌尝试Tiptip或Qtip。你会安全吗

需要有关简单CSS工具提示的建议

1 个答案: