Question

Ok I’m stumped. I have been trying to use Simpletip to create a tooltip on click event so that tooltips are useful on a mobile device.

I can’t for the life of me get anything to happen. Have created an example at http://jsfiddle.net/JrDYN/5/ of the unsuccessful attempt.

Is anyone able to spot why this doesn’t work?

Thanks
Greg

Answer 1

You have a couple of issues here. For starters, you’re using object literal syntax inside the call to hover but the code you’re passing in is a function body:

$(".trafficlights").hover({
    $(this).css('background', 'green');
}); 

And you had a typo in the simpletip call (the S was capitalized). This works in the jsFiddle example:

$(document).ready(function () {
    $(".trafficlights").simpletip({
         content: 'Simple Tip'
    });
    $(".trafficlights").hover(function () {
        $(this).css('background', 'green')
    });        
});

Here’s an updated version of your jsFiddle.

For future reference, the way I figured this out was to pull up Chrome’s developer tools (hit F12) and look at the console tab. Chrome was reporting a syntax error. That helped me spot the missing function keyword.

Once I had that in place, I was still getting an error, so I commented out the call to simpletip and the error went away. Bingo, syntax error in the simpletip section, an object didn’t exist. A quick peek at the documentation confirmed that the simpletip call needed to be capitalized. There you have it.