Question

I am trying to make a simple tool tip function (I’m trying to learn jQuery so please don’t suggest plugins for this). When I write it like this it works:

             $('span.toolTip').hide();
             function toolTip() {
                $('.targetLink').mouseover(function() {                
                    $('.toolTip').show().html('Hello there');
                });
            }

            <span class='toolTip'></span>
            <a href="#" class="targetLink">Hover over me</a>

But when I try to pass parameters through the function it doesn’t work:

    $('span.toolTip').hide();
    function toolTip(target, tooltip, message) {
        var target = '.' + target;
        $(target).mouseover(function() {
            var tooltip = '.' + tooltip;
            $(tooltip).show().html(message);
        });
    }

    toolTip('targetLink', 'toolTip', 'Hello There');

    <span class='toolTip'></span>
    <a href="#" class="targetLink">Hover over me</a>

Answer 1

You’re “hiding” the target parameter with a new local target variable:

function toolTip(target, tooltip, message) {
    // this target is not the same as the parameter target
    var target = '.' + target;

Simply remove the var and it should work:

function toolTip(target, tooltip, message) {
    target = '.' + target;
    ...