Question

I am using jQuery along with the Simple Tooltip plugin. ( http://dev.mariusilie.net/content/simple-tooltip-jquery-plugin)

I have a function that loops through the cells of a table, checks to see if there is a match and then sets the title element and then calls the simple tooltip plugin.

This works perfectly when the page initially loads. The problem occurs when I try to change the title element without reloading the whole page. I can confirm that the title element for the cell does get updated but inspecting it using chrome but the tooltip still displays the old values when the mouse hovers over the cell.

I am quite sure this is a fundamental part of jQuery that I am just misunderstanding. Any input would be greatly appreciated.

EDIT: Ok I think I see whats going on although I dont know how to resolve it. Ever time I call $(cell).simpletooltip(); it adds the .hover to that element. I am guessing that each subsequent call to it for an element that already has the .hove attached is either failing or is adding it but the first one is still there and is the one that is triggered when the mouse hovers. Seems like I need to remove that first function..

This is the Simple Tool Tip plugin:

/**
*
*   simpleTooltip jQuery plugin, by Marius ILIE
*   visit http://dev.mariusilie.net for details
*
**/
(function($){ $.fn.simpletooltip = function(){
    return this.each(function() {
        var text = $(this).attr("title");
        $(this).attr("title", "");
        if(text != undefined) {
        $(this).hover(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            $(this).attr("title", ""); 
            $("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");
            if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)
            else var tipWidth = $("#simpleTooltip").width()
            $("#simpleTooltip").width(tipWidth);
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        }, function(){
            $("#simpleTooltip").remove();
            $(this).attr("title", text);
        });
        $(this).mousemove(function(e){
            var tipX = e.pageX + 12;
            var tipY = e.pageY + 12;
            var tipWidth = $("#simpleTooltip").outerWidth(true);
            var tipHeight = $("#simpleTooltip").outerHeight(true);
            if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;
            if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
            $("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
        });
    }
});
}})(jQuery);

Below is my code:

 // Iterate over each cell for the day and assign a category css class to each.
    $('table.tstat_program_hours td[data-day=' + dayOfWeek + ']').each(function(index, elem) {
        var cell = $(this);
        var cellHour = cell.attr('data-hour');

        var tempTitleInLoop = '';

        if (cellHour < data['wake_time']) {
            tempTitleInLoop = 'Night';
            cell.attr('title',tempTitleInLoop);
        }   

        /* set the wake */
        if(cellHour < data['morning_time']&&cellHour >= data['wake_time']) {
            tempTitleInLoop = 'Wake';
            cell.attr('title',tempTitleInLoop);
        }

        /* set the morn */
        if(cellHour < data['evening_time']&&cellHour >= data['morning_time']) {
            tempTitleInLoop = 'Day';
            cell.attr('title',tempTitleInLoop);
        }

        /* set the evening */
        if(cellHour < data['night_time']&&cellHour >= data['evening_time']) {
            tempTitleInLoop = 'Eve';
            cell.attr('title',tempTitleInLoop);

        }

        /* set the night */
        if(cellHour >= data['night_time']) {
            tempTitleInLoop = 'Night again';
            cell.attr('title',tempTitleInLoop);
        }



        $(cell).simpletooltip();

Answer 1

Try $(cell).unbind().simpletooltip();

Which should remove the onMouseOver event from that element.