CSS позиционирование всплывающей подсказки

Question

Попытка стилизовать всплывающее окно CSS. Я знаю, что есть библиотеки, я все равно делаю это вручную.

<div class="labelDiv">
    <span class="label helpText">Description</span>
    <div id="activeHelpTip" class="helpTip messageBox">
        Help text not defined for this field.
    </div>
</div>

.labelDiv { float: left; position: relative; } 
.helpTip
{
    display: block;
    position: absolute;
    padding:2px;
    max-width:350px;
    z-index:1;
    left: 5px;
    top:22px;
}

.labelDiv - это позиция rel, поэтому абсолютное значение .helpTip является абсолютным по отношению к собственному labelDiv. AFAICT .helpTip должен быть абсолютным, поэтому он игнорируется в обычном потоке страниц.

Как мне заставить всплывающую подсказку всплыть над полем ввода справа? Я хочу, чтобы он плавал над всем, кроме края браузера.

http://img213.imageshack.us/img213/278/popupcss.png

Answer 1

Разве вы не должны просто корректировать свойства top и left соответственно? Что произойдет, если вы это сделаете?

EDIT

Если ваши метки установлены, скажем, 100px для простоты, то при настройке влево на 100px всплывающая подсказка всплывет над вашим полем ввода. В этом случае нужно учитывать две вещи: вам нужно убедиться, что у вашего тега div есть переполнение: visible и что у него более высокий z-индекс, чем у вашего поля ввода.

Если ваш ярлык div НЕ установлен ширины, вы можете отрегулировать правую границу, например. right:0px, который поместит его на правый край этикетки. Вы также можете использовать отрицательные числа, чтобы они вырвались из метки div, и в этом случае вам также нужно будет принять во внимание два вышеуказанных пункта.

Answer 2

Нам нужно немного больше информации, но попробуйте добавить z-index в ".labelDiv", который больше, чем z-index поля ввода. Возможно, вам потребуется добавить позиционирование в поле ввода, чтобы оно приняло z-index. Я, если это плавающий элемент, обычно добавляю «position :lative; float: left» к элементу, который мне нужен ниже, но не нужно его позиционировать.

Итак, мой ответ - z-index.

Это должно работать.

EDIT

Как бы искусственно, как это ни было. Подойдет ли отрицательная правая граница?

Answer 3

Прежде всего вам нужно дать .labelDiv переполнение: видимое. Можете ли вы привести более подробный пример HTML или ссылку на эту страницу?

-edit- Кроме того, всплывающей подсказке понадобится ширина или хотя бы минимальная ширина, чтобы убедиться, что она не подстраивается под размер содержащего элемента div

Answer 4

Вы, ребята, были правы, нужно больше HTML-контекста. В итоге я продвинул всплывающую подсказку div до элемента body, а затем вручную расположил ее относительно соответствующей метки. Я не смог заставить браузер сделать это для меня без подобных незначительных проблем.

Answer 5

Пара вещей, вы, вероятно, должны использовать тег <label>, чтобы объявить метку для поля ввода. Использование атрибута title на входе вместе с текстом подсказки создаст нужный текст для наведения на поле ввода, а браузер сделает всю работу за вас.