Что я делаю неправильно с этим поведением всплывающей подсказки jQuery?

(редактировать) текущее поведение не показывает всплывающую подсказку при наведении. не заголовок html по умолчанию или всплывающая подсказка jquery (/ редактировать)

У меня есть календарь на веб-странице. Когда в день есть событие, и вы наводите на него курсор, отображается атрибут заголовка html, содержащий имена событий, разделенные запятыми. Это будет выглядеть некрасиво, когда в один день будет 20 событий, поэтому я хочу сделать это отображение по-другому, используя jQuery. Вот мой код для отображения всплывающей подсказки (у меня возникли проблемы с использованием $ для jQuery, потому что я не понимаю конфликт между другими сценариями jQuery на странице, и ввод всего этого, кажется, просто работает):

jQuery(function(){
        var tip = jQuery("#tip");

        //on hover of links with a class of "eventful"
        jQuery(".eventful a").hover(function(e){

            //pull the title attribute into variable "tip"
            tip.text(jQuery(this).attr("title"));

            //make the default title blank
            jQuery(this).attr("title", "");

            //place the new title with css
            tip.css("top",(e.pageY+5)+"px")
                .css("left",(e.pageX+5)+"px")
                .fadeIn("slow");

        }, function() {
                //on mouse out remove
                jQuery("#tip").fadeOut("fast");

                //replace the default title
                jQuery(this).attr("title", tip.html());
        });
    });

и это не работает, поэтому я не уверен, что я делаю неправильно. но после того, как я получу всплывающую подсказку, мне нужно изменить способ отображения нескольких событий, разделенных запятыми, желательно изменить их на неупорядоченный список. У меня есть этот фрагмент ниже, который может или не может разделять элементы на массив, разбивая строку на каждую запятую:

var titleArray = $(".eventful").attr("title").split(",");

если это сработает, я не знаю, как его включить и поместить в ul. заранее большое спасибо за помощь в этом!


arrays jquery jquery-tooltip
person Jarrod    schedule 08.04.2011    source источник
comment
Вроде идеально. jsfiddle.net/XgqZG Вы получаете какую-либо ошибку JS.   -  person JS Mitrah    schedule 08.04.2011

Ответы (1)


arrow_upward
0
arrow_downward

Совет div должен иметь стиль position:absolute, а его z-индекс должен быть больше, чем у других элементов на странице. Добавить jQuery("#tip").css('z-index',somehighvalue)

person JS Mitrah    schedule 08.04.2011
comment
Это помогло, спасибо. Моя проблема сейчас с позиционированием, я думаю. Этот div содержится в области виджета, и я считаю, что использование pageY и pageX приводит к тому, что div располагается далеко за пределами области виджета и, следовательно, не виден. Есть ли способ разместить div без использования pageY и pageX? сайт, с которым я работаю, находится по адресу dev.adabible.org, а календарь находится в левом нижнем углу главной страницы. Спасибо за помощь. - person Jarrod; 09.04.2011
comment
После повторного рассмотрения проблемы я понял, что не должен был размещать свой блок #tip внутри области виджета. Я поместил его снаружи, и теперь все в порядке. Благодарю вас! Есть ли у вас какие-либо советы о том, как превратить массив элементов в неупорядоченный список? - person Jarrod; 10.04.2011
comment
Да! Большое спасибо! Это сработало отлично. Мне нужно было сделать только одно изменение, и это превращало второй тег ‹li› в закрывающий ‹/li›, поскольку я отображал дополнительный пустой элемент списка. Спасибо еще раз! - person Jarrod; 11.04.2011