CODEWITHSUNDEEP
jquerysimpletip
Barbs
Barbs

Reputation: 1115

Simpletip plugin not working

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

Upvotes: 0

Views: 1526

Answers (2)

Trax72
Trax72

Reputation: 958

I just ran into the same problem, and it looks like simpletip places the tooltip html inside the img tag. Because of this, it's not recognized and handled by the browser and you don't see the tooltip appear.

I worked around it by wrapping the image inside <a href="javascript:;"></a> and applying simpletip to the link.

Upvotes: 0

Josh Earl
Josh Earl

Reputation: 18351

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.

Upvotes: 1

Related Questions