Нужна консультация по простой подсказке CSS - PullRequest
Новая
       5

Нужна консультация по простой подсказке CSS

0 голосов
/ 24 августа 2011

Мне нужен совет по простой подсказке 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 (нашел технику через поиск в Google): 

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. Любой, и все советы приветствуются.

Спасибо, что нашли время, чтобы прочитать, и хорошего дня. : -)

1 Ответ

1 голос
/ 24 августа 2011

Почему бы не использовать простой скрипт подсказки jquery. прост в реализации и будет настроен менее чем за 1 минуту. попробуйте Tiptip или Qtip в Google. Обезопасит вас некоторое время

...