Javarscript issues with dynamic tooltipster

Question

I'm using Tooltipster which seems to be a nice jquery plugin.

Regardless I need to have my tooltips dynamic, which I don't believe should be that difficult. However I wrote a script and maybe it's because I'm tired or I don't know the simplest of javascript. Probably a combination of both.

I can't seem to get around this particular error. TypeError: $(...).tooltipster is not a function.

Here is the basic javascript code:

$("img#box_image[data-img-number]").hover(function(e) {
e.preventDefault();
        i = $(this).attr("data-img-number");
        var w = "http://trailerbrokerimages.s3.amazonaws.com/pics/" + i  ;
        window.console.log('before tool');
        window.console.log('before tool ' +w);
        tool(w);
});
var tool = function (w) {
$('.tooltip_two').tooltipster({content: $('<span><img   style="height:191px;                                                                                width:256px;"src="http://trailerbrokerimages.s3.amazonaws.com/pics/'+w+'" /></span>')});

An example of the code can be found at http://www.trailerbroker.com/go/listings/view/219

I suspect it's lame mistake on my part, thanks.

Answer 1

You have the same id box_image for multiple elements.

I understand that you're trying to make it unique by appending the data-img-number , but this won't work, as there's no way you can do this at run time unless your explicitly specifying different hover handlers.

Instead you could attach the hover handler to a class.

Add a class="box_image" to your <img /> elements and attach the hover as follows,

$(".box_image").hover(//rest of your code here//)

This should give you the desired functionality.

Answer 2

I solved this problem by using twitter bootstrap popover. Don't waste your time with tooltipers.