Всплывающие подсказки Qtip не отображаются - PullRequest
Новая
       26

Всплывающие подсказки Qtip не отображаются

0 голосов
/ 19 сентября 2011

Я сделал навигационную панель в верхней части моей страницы статической (остальная часть страницы является динамической)

Панель навигации находится в элементе div, которому присвоен идентификатор "header", а все остальное находится вdiv с идентификатором "main".

Я использую этот код для создания всплывающих подсказок.

Это Javascript / jquery / qtip 

$(document).ready(function() {
//Tooltips
    $(".tiptrigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if (tipVisX < 20) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if (tipVisY < 20) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
   });
});

$(document).ready(function() {
//Tooltips
    $(".tipheader").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX + 30; //Get X coodrinates
        var mousey = e.pageY + -20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if (tipVisX < 20) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if (tipVisY < 20) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});

Тогда это CSS

.tip {
    color: #fff;
    background: #1d1d1d;
    display: none; /*--Hides by default--*/
    padding: 10px;
    position: absolute;    
    z-index: 1000;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    }

Это HTML-код, который вызывает всплывающую подсказку.Первая строка предназначена для основного раздела, вторая - для заголовка. 

<a href="LINK URL" class="tiptrigger"><img src="IMAGE URL" alt="" /><span class="tip">CONTENT</span></a>
<a href="LINK URL" class="tipheader"><img src="IMAGE URL" alt="" /><span class="tip">CONTENT</span></a>

Причина, по которой я использовал два разных раздела javascript, заключается в том, что всплывающим подсказкам в заголовке и подсказкам в основном разделе требовались разные параметры..

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

Ответы [ 2 ]

0 голосов
/ 20 сентября 2011

Я наконец смог исправить это, установив #header div в фиксированное положение (чтобы оно оставалось в верхней части окна без абсолютного позиционирования), и я установил #main div в статическое положение и переместил его вниз с помощью просто разрывов страниц. .

* Я решил, что будет эффективнее использовать только один тип всплывающей подсказки, поэтому я удалил один. * Обратите внимание, как я установил min-height, чтобы я мог отображать, как div #header остается наверху при прокрутке, это эффект, который я хотел.

http://jsfiddle.net/tz59G/5/

чтобы увидеть готовый результат, перейдите по ссылке: ultimatemmo.webege.com

Навбар сверху - это мой заголовок, а все остальное - мой основной div.

Примечание: этот сайт не является обычным трафиком, я сделал это для школьного проекта, теперь это просто личный проект, который я постоянно совершенствую. Единственная причина, по которой он есть в Интернете, заключается в том, что мои друзья и подруги могут видеть мой прогресс в этом.

0 голосов
/ 20 сентября 2011

Вам нужно абсолютное позиционирование на ваших div элементах (это не так, поскольку вы не указываете значения top или left)?Так как всплывающая подсказка использует абсолютное позиционирование и вложена в другой элемент, который также использует абсолютное позиционирование , она не может «вырваться» из родительского элемента.

Я рекомендую удалить position: absolute правило из стилей #header и #main.В качестве альтернативы, удаление правила overflow: auto из стиля #header также работает.

http://jsfiddle.net/tz59G/3/

...