Всплывающая подсказка css position adsolute in li

Question

Всплывающая подсказка css position adsolute in li

0

У меня есть всплывающая подсказка, с которой я использую JS и CSS. Но когда она находится в <li> она отображается слева от страницы, а не рядом с изображением, как должно.

Любые идеи, он отлично работает, когда не в <li>. Ниже приведен код

Код JS

this.showTooltip = function (a, b) {
    $("#" + b).css("left", $(a).position().left + 20 + "px");
    $("#" + b).css("top", $(a).position().top + "px");
    $("#" + b).fadeIn("slow")
};
this.hideTooltip = function (a) {
    $("#" + a).fadeOut("slow")
};
this.formSubmit = function (a) {
    $("#orderform")[0].submit()
};
this.mainPageShow = function (b, a) {
    $("#header_" + b).hide();
    $("#header_" + a).show()
}

Код CSS

.tooltip {
    position: absolute;
    z-index: 100;
    padding: 10px;
    border: solid 1px #dadada;
    background-color: #f9f9f9;
    width: 200px;
}

Код HTML

<ul>
    <li><img onmouseover="showTooltip(this,'a');" onmouseout="hideTooltip('a');" alt="Tooltip" src="img/content/question.gif" width="20" height="20" align="left" />A</li>
    <li><img onmouseover="showTooltip(this,'b');" onmouseout="hideTooltip('b');" alt="Tooltip" src="img/content/question.gif" width="20" height="20" align="left" />B</li>
    <li><img onmouseover="showTooltip(this,'c');" onmouseout="hideTooltip('c');" alt="Tooltip" src="img/content/question.gif" width="20" height="20" align="left" />C</li>
</ul>

<div class="tooltip" id="a" style="display: none;">A test</div>
<div class="tooltip" id="b" style="display: none;">B test</div>
<div class="tooltip" id="c" style="display: none;">C test</div>

Garry 15 апр. 2014, в 18:14

Источник

0

Вы знаете, что элементы с абсолютным позиционированием расположены относительно их элемента offsetParent ? Т.е. к ближайшему элементу, который не позиционируется статично.
Teemu 15 апр. 2014, в 16:01
0

Несмотря на мой ответ ниже, относительно вашего конкретного случая, вы должны попытаться использовать offset () вместо position (). position () будет хорошо работать только в том случае, если ваши элементы <li> / <img> расположены абсолютно или относительно, что не так.
leandroico 15 апр. 2014, в 16:26
1

смещение сделал свое дело, спасибо
Garry 15 апр. 2014, в 18:05

Показать ещё 1 комментарий

Теги:

javascript

html

css

tooltip

1 ответ

Ещё вопросы

Вы знаете, что элементы с абсолютным позиционированием расположены относительно их элемента offsetParent ? Т.е. к ближайшему элементу, который не позиционируется статично.
Несмотря на мой ответ ниже, относительно вашего конкретного случая, вы должны попытаться использовать offset () вместо position (). position () будет хорошо работать только в том случае, если ваши элементы <li> / <img> расположены абсолютно или относительно, что не так.
смещение сделал свое дело, спасибо

leandroico · Answer 1 · 2014-04-15T14-49-00.000Z

Вы можете просто использовать свою логику, удалив встроенный JS-код и так далее. Ниже приведен рабочий пример.

HTML:

<ul>
    <li data-tooltip="Tooltip explanation for A"><span>Question A</span></li>
    <li data-tooltip="Tooltip explanation for B"><span>Question B</span></li>
    <li data-tooltip="Tooltip explanation for C"><span>Question C</span></li>
</ul>
<div id="tooltip" class="nd"></div>

CSS:

#tooltip {
    background: #eee;
    border: 1px solid #bbb;
    padding: 5px;
    position: absolute;
}
.nd {
    display: none;
}

JS:

$(function() {
    var tooltip = $("#tooltip");
    $('[data-tooltip]').bind('mouseover', function() {
        var $this = $(this), offset = $this.offset(), posX = offset.left, posY = offset.top;
        posX += $this.find('span').innerWidth();
        tooltip.
            css({left: posX + "px", top: posY + "px"}).
            text($this.attr('data-tooltip')).
            removeClass("nd");
    }).bind('mouseout', function() { tooltip.addClass('nd'); });
});

jsfiddle ссылка: http://jsfiddle.net/4s9Uz/

Как вы видете. Это довольно просто. Существуют некоторые ограничения и замечания относительно этого подхода:

Он работает правильно, когда элемент находится внутри элемента с правилом переполнения (где он имеет прокручиваемое содержимое).
Если элемент слишком далеко справа, всплывающая подсказка будет превышать область просмотра и заставит браузер показывать горизонтальную полосу прокрутки.
В этом случае вам нужно будет использовать диапазон, как и я, чтобы всплывающая подсказка появилась сразу после ее содержимого. Возможно, это не сработает, если содержимое тега span имеет несколько строк. Но это должно быть подтверждено.
Вам просто нужны элементы с атрибутом data-tooltip в нем, с текстом, который вы хотите показать. Если вы хотите показать что-либо помимо текста, вам нужно будет улучшить этот подход.

Но, по крайней мере, у вас есть кое-что, что можно было бы делать дальше и улучшать.