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.

score 1 · Answer 1 · answered Feb 17 '14 at 09:25

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.

answered Feb 17 '14 at 09:25

painotpi

6,894
1
37
70

That made sense, so made the appropriate changes. However, I'm still getting the following error TypeError: $(...).tooltipster is not a function. I am capturing the correct data id, I just can't seem to pass it to the tooltipster? – Chad Feb 17 '14 at 15:52
@Chad I just checked the code on the link you've provided, put your in side `$(document).ready()` or `$(window).load()` – painotpi Feb 17 '14 at 19:07
I updated the code, but I can't seem to get it work. It's back to the original issue TypeError: $(...).tooltipster is not a function. I'm missing something really simple... – Chad Feb 18 '14 at 19:19
@Chad There's a problem with the minified version of the file, change the src to point to the unminified version of the file. That should help. Download a fresh version from http://iamceege.github.io/tooltipster/ – painotpi Feb 19 '14 at 07:16
@Chad The minified version doesn't contain a `$.fn` or a `$.extend` which are "mandatory" for writing a plugin. – painotpi Feb 19 '14 at 07:17
@Turan I made the changes to no effect. Thanks for all your help, I emailed iamceege, to what's up with their code. I'll keep you posted, thanks. – Chad Feb 20 '14 at 06:39

score 0 · Answer 2 · answered Apr 04 '14 at 17:22

0

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

answered Apr 04 '14 at 17:22

Chad

643
2
11
22

Javarscript issues with dynamic tooltipster

2 Answers2