动态工具提示的Javarscript问题

Question

我正在使用Tooltipster ，它似乎是一个不错的jquery插件。

无论如何，我都需要保持动态的工具提示，我认为应该没有那么困难。 但是我写了一个脚本，也许是因为我累了或者我不了解最简单的javascript。 可能两者兼而有之。

我似乎无法解决这个特定错误。 TypeError：$（...）。tooltipster不是函数。

这是基本的JavaScript代码：

$("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>')});

可以在http://www.trailerbroker.com/go/listings/view/219上找到该代码的示例

我怀疑这是我的la脚错误，谢谢。

Answer 1

对于多个元素，您具有相同的id box_image 。

我了解您正在尝试通过添加data-img-number使其唯一，但这将无法正常工作，因为除非您明确指定不同的hover处理程序，否则无法在运行时执行此操作。

相反，您可以将hover处理程序附加到类。

在您的<img />元素中添加class="box_image"并将hover ，如下所示，

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

这应该为您提供所需的功能。

Answer 2

我通过使用twitter bootstrap popover解决了这个问题。 不要浪费时间使用工具提示。