CSS позиционирование всплывающей подсказки - PullRequest
Новая
       6

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

1 голос
/ 10 ноября 2011

У меня есть всплывающая подсказка, и когда пользователь нажимает на поле, всплывающая подсказка нарушает ширину td.

Есть ли какие-либо решения для этого?

У меня естьрабочий пример здесь:

http://jsfiddle.net/yfM5T/

Если вы нажмете на поле пароля, размер этого TD увеличится.Как сохранить размер TD в целости и показать подсказку?

Ответы [ 4 ]

2 голосов
/ 10 ноября 2011

Добавьте position: absolute; к вашему .tooltip классу.Скрипка здесь: http://jsfiddle.net/yfM5T/8/

2 голосов
/ 10 ноября 2011

Добавьте это к .tooltip

position: absolute;

http://jsfiddle.net/yfM5T/9/

1 голос
/ 10 ноября 2011

Поместите инструмент в абсолютную позицию, сверху: 0, слева: 0

, затем с помощью mootools или jquery укажите, что при его появлении позиции X и Y всплывающей подсказки должны быть аналогичны позиции поля +некоторый дополнительный пробел (например, поле)

и не забудьте добавить условие, которое перемещает всплывающую подсказку, когда кто-то изменяет размер экрана.

С JQuery, вот пример (Iне используйте mootools, но я предполагаю, что вы можете сделать то же самое): 

function placeTooltip() {
    $("#tooltip").css("left",$("#field").position().left + $("#field").width());
    $("#tooltip").css("top",$("#field").position().top - $("#tooltip").height());
}

//Places tooltip on page load
$(document).ready(function() {
    placeTooltip();
});

//Places tooltip on page resize
$(window).resize(function() {
    placeTooltip();
});

$("#field").mouseenter(function() {
    $("#tooltip").fadeIn("normal");
});
1 голос
/ 10 ноября 2011

Добавьте position:absolute; (css) к подсказке.Если вы хотите, чтобы он изменил положение (используя верхнюю и левую части), вы можете задать элемент контейнера (в вашем случае <td>) position:relative;, а левая и верхняя часть всплывающей подсказки будут расположены относительно td (нетело документа), и это не нарушит макет.

...