Не работает окно истинной подсказки в jQuery

#javascript #jquery #css

Вопрос:

Не знаю, почему окно всплывающей подсказки (класс .show_tooltip ) отображается слева при включении мыши li a . Я хочу отображать каждое окно всплывающей подсказки поверх той же ссылки, что и мышь, т. Е. Чуть выше / слева от ссылки. Ссылки должны быть справа так же, как и сейчас, поэтому, пожалуйста, не меняйте мой html-код) ДЕМО

Пример: наведение курсора мыши на «как»: что я могу сделать, чтобы получить это так?

введите описание изображения здесь

Эти коды представляют собой небольшую часть образца из моего исходного кода, который довольно длинный.

CSS:

 .show_tooltip{
    background-color: #E5F4FE;
    display: none;
    padding: 5px 10px;
    border: #5A5959 1px solid;
    position: absolute;
    z-index: 9999;
    color: #0C0C0C;
    /*margin: 0 0 0 0;
    top: 0;
    bottom: 0;*/
}

HTML:

 <ul>
    <li>    
    <div class="show_tooltip">
        put returns between paragraphs
    </div>
        <a href="#">about</a>
    </li>

    <li>    
    <div class="show_tooltip">
        for linebreak add 2 spaces at end
    </div>
        <a href="#">how</a>
    </li>
</ul>

jQuery:

 $("li a").mouseenter(function(){
     $(this).prev().fadeIn();
}).mousemove(function(e) {
            $('.tooltip').css('bottom', e.pageY - 10);
            $('.tooltip').css('right', e.pageX   10);
        }).mouseout(function(){
     $(this).prev().fadeOut();
})

Ответ №1:

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

Рабочая демонстрация -> http://jsfiddle.net/bikerabhinav/AQh6y/8 /

Объяснение: получить ширину родительского контейнера (действовать как ось / основание)

     var t = $('ul').outerWidth();

Получить смещение влево ссылки :

 var l = $(this).offset();

Примените их к CSS всплывающей подсказки. Расположите его абсолютно:

 $("li a").mouseenter(function(){
    var l = $(this).offset();
    var t = $('ul').outerWidth();
$(this).prev().css({right:t 20-l.left,top:l.top}).fadeIn();
}).mousemove(function(e) {
        $('.tooltip').css('bottom', e.pageY - 10);
        $('.tooltip').css('right', e.pageX   10);
     }).mouseout(function(){
     $(this).prev().fadeOut();
});

PS: по сути, это скорее хак, но я надеюсь, вы понимаете, что я пытаюсь здесь сделать. Гораздо лучшим способом было бы, если бы вы очистили HTML

1. в моем проекте это не работает, увидимся: ссылка

2. Это потому, что ваша HTML-разметка неверна. Отлично работает в Chrome / FF (ПОЧЕМУ вы постоянно изменяете предоставленную вами ссылку? как мы должны увидеть, что не так?) В любом случае, сначала исправьте HTML CSS

3. Хорошо, я вставил оригинал HTML в ссылку , пожалуйста, увидимся и скажи мне, в чем проблема? {я изменил ссылку, потому что я использую codeigniter, я думаю, что, возможно, проблема в этом, и я не могу поместить ее в jsfiddel. Пожалуйста, посмотрите эту ССЫЛКУ и скажите мне, что не так и что должно измениться в HTML и CSS?}

Ответ №2:

это то, что вы хотите —> DEMO

изменение position: fixed; в .show_tooltip{}