動態工具提示的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解決了這個問題。 不要浪費時間使用工具提示。