Question

(edit) current behavior is no tooltip showing on hover. not the default html title or the jquery tooltip(/edit)

I have a calendar on a webpage. When a day has an event and you hover over it, the html title attribute displays containing the event names separated by commas. This is going to start looking ugly when there’s 20 events on a single day, so I want to make this display differently using jQuery. Here’s my code for showing the tooltip (i’ve run into problems using $ for jQuery because I don’t understand the conflict stuff between other jQuery scripts on the page and typing it all out seems to just work):

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());
        });
    });

and that’s not working, so I’m not sure what i’m doing wrong there. but after I get the tooltip to display, I need to change the way the multiple, comma separated events are shown, preferably changed into an unordered list. I’ve got this snippet below that may or may not separate the items into an array, breaking the string off at each comma:

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

if that does work, I’m not sure how to incorporate it, and get it into a ul. many thanks in advance for help on this!

Answer 1

tip div should have position:absolute style & it’s z-index should be greater then other elements in the page. Add jQuery("#tip").css('z-index',somehighvalue)