Question

>> JSFIDDLE <<

I think the title is self explanatory. I don’t know why this code is not working:

function toolTip() {
    var list = $("#readMoreUl");
    var links = list.children("li").children("a");
    var tooltips = links.children("span.tooltip");

    links.hover(function () {
        $(this).children("span.tooltip").fadeIn(350);
        },
    function () {
        $(this).children("span.tooltip").fadeOut(40);
        });    
}

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() > 480) {
            toolTip();
        }
    }).resize();
});

I also wondered: is my use of the last .resize call correct? Emulating an actual resize so the function gets called on window ready?

Answer 1

For one, your code installs the tooltip handlers when the window is > 480 and every time that is detected, it installs it again (resulting in multiple event handlers). And, if the window is sized smaller than 480, it never removes the tooltip event handlers.

I would suggest doing it this way which is much simpler:

function toolTip() {
    var list = $("#readMoreUl");
    var links = list.children("li").children("a");
    var tooltips = links.children("span.tooltip");
    var overlay = $("#overlay");

    links.hover(function () {
        if ($(window).width() > 480) {
            $(this).addClass("highlight");
            $(this).children("span.tooltip").fadeIn(350);
            overlay.fadeIn(400);
        }
    },
    function () {
        $(this).children("span.tooltip").fadeOut(40);
        overlay.fadeOut(30);
        $(this).removeClass("highlight");
    });    
}

$(document).ready(function () {
    toolTip();
});

You can see it work here: http://jsfiddle.net/jfriend00/yVCwS/
​