#css
#css
Вопрос:
Пытаюсь оформить всплывающее окно 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 — это position rel, поэтому absolute .helpTip является абсолютным относительно принадлежащего ему labelDiv. Подсказка AFAICT .HELP должна быть абсолютной, чтобы она игнорировалась в обычном потоке страниц.
Как мне заставить всплывающую подсказку перемещаться над полем ввода справа? Я хочу, чтобы она плавала над всем, кроме края браузера.
Комментарии:
1. Что-нибудь из этого ответило на ваш вопрос?
2. это то, что мне тоже интересно 🙂 Я считаю обычной вежливостью болтаться поблизости, пока он не получит это или пока я не смогу сказать «Я не знаю», но я думаю, что он ушел: P
3. у меня ее пока нет, но на сегодня я сдался.
Ответ №1:
Прежде всего, вам нужно указать .Обозначьте переполнение: видимое. Можете ли вы привести более подробный HTML-пример или ссылку на эту страницу?
-редактировать — также всплывающей подсказке потребуется ширина или, по крайней мере, минимальная ширина, чтобы убедиться, что она не подстраивается под размер содержащего div
Комментарии:
1. функция min-width перемещает ее над полем ввода (это дочерний элемент div метки), но она просто расширяет поле пробелами, что выглядит глупо.
2. arnhemdenkthet.nl/wptheme/test.php оба примера работают в IE7, только второй в FF, поэтому вам понадобится минимальная ширина, по-видимому, z-indexes здесь ничего не изменили для меня
3. О, я пропустил ваш комментарий. пробел: nowrap позаботится о том, чтобы текст всплывающей подсказки занимал одну строку, поэтому он будет расширяться за пределы и не добавит пробелов, но если вам нужно несколько строк, вам понадобятся разрывы строк (<br />)
Ответ №2:
Разве вы не должны просто соответствующим образом настроить свойства top и left? Что произойдет, если вы это сделаете?
Редактировать
Если для ваших меток задано значение, скажем, 100px для упрощения, то при изменении левого значения на 100px всплывающая подсказка будет располагаться над вашим полем ввода. В этом случае следует учитывать две вещи — вам нужно убедиться, что ваша метка div имеет overflow: visible и что она имеет более высокий z-индекс, чем ваше поле ввода.
Если у вашей метки div НЕ задана ширина, вы можете настроить правильную границу, например. right:0px что поместит ее на правый край метки. Вы также можете использовать отрицательные числа, чтобы вывести ее за пределы метки div, и в этом случае вам также придется принять во внимание два вышеуказанных пункта.
Комментарии:
1. вверху и слева просто отрегулируйте верхний левый угол окна. это не влияет на правую границу поля.
2. z-индекс необходим на случай, если всплывающая подсказка выходит из своего поля, но находится под полем ввода. прежде чем это произойдет, всплывающая подсказка должна открыться, чего не происходит, потому что ее ширина корректируется в соответствии с div, который ее содержит. Проблема здесь в том, как заставить всплывающую подсказку выделяться вместо переноса.
3. Ах, это немного проясняет ситуацию, в таком случае я должен был бы согласиться с вашим ответом, что ему нужно будет установить ширину для своей всплывающей подсказки
Ответ №3:
Нам действительно нужно немного больше информации, но попробуйте добавить z-индекс к «.labelDiv», который больше z-индекса поля ввода. Возможно, вам потребуется добавить позиционирование в поле ввода, чтобы оно принимало z-индекс. I если это плавающий элемент, я обычно добавляю «position: relative;float:left» к элементу, который мне нужен ниже, но не нужно его позиционировать.
Итак, мой ответ — z-index.
Это должно сработать.
Редактировать
Какой бы искусственной паузой это ни было. Поможет ли отрицательное правое поле?
Комментарии:
1. Я неправильно понял вопрос, я думал, у вас возникли проблемы с полем, появляющимся под полем ввода.
2. это было бы так, но тогда поле всегда расширялось бы по полю ввода на точно такое же расстояние (то есть на заданную величину отрицательного поля). Если это то, чего он хочет, то да, это тоже было бы решением.
Ответ №4:
Пара вещей, вероятно, вам следует использовать <label> тег для объявления метки для поля ввода. Использование title атрибута при вводе вместе с текстом вашей всплывающей подсказки создаст нужный текст при наведении курсора мыши на поле ввода, и браузер сделает всю работу за вас.
Комментарии:
1. да, для проверки требуется метка, но она не поможет в его случае. он специально говорит, что хочет сам оформить всплывающее окно, поэтому обычная всплывающая подсказка не подойдет
Ответ №5:
Вы, ребята, были правы, было необходимо больше контекста HTML. В итоге я продвинул всплывающую подсказку div вплоть до элемента body, а затем вручную расположил ее относительно соответствующей метки. Я не смог заставить браузер сделать это за меня без подобных незначительных проблем.