使用jQuery的工具提示與flot圖表

我跟隨example使用jQuery的工具提示。我有畫布上顯示的標題。我不知道如何擺脫這一點。當我將鼠標懸停在畫布上時，我看到了這一點。請參閱我的形象附使用jQuery的工具提示與flot圖表

$(function() { 

    var $chart = $("#placeholder"), 
     ttPos = $.ui.tooltip.prototype.options.position; 

    $.plot(
     $chart, 
     [{ 
      label: "Number of users", 
      data:[ 
       [ 1, 2233 ], 
       [ 2, 1294 ], 
       [ 3, 1658 ], 
       [ 4, 1603 ], 
       [ 5, 1790 ], 
       [ 6, 2103 ] 
      ] 
     }], 
     { 
      series: { 
       lines: { show: true }, 
       points: { show: true } 
      }, 
      grid: { 
       hoverable: true 
      }, 
      legend: { 
       show: false 
      } 
     } 
    ); 

    $chart.bind("plothover", function(e, pos, item) { 

     var isTooltip = $chart.is(":ui-tooltip"); 

     if (item !== null && isTooltip === false) { 

      var label = item.series.label, 
       data = item.datapoint[1], 
       content = label + "<br/><hr>" + data, 
       evtPos; 

      evtPos = $.extend(ttPos, { 
       of: { 
        pageX: item.pageX, 
        pageY: item.pageY, 
        preventDefault: $.noop 
       } 
      }); 

      $chart.attr("title", content ) 
        .tooltip({position: evtPos, 
          content: content}) 
        .tooltip("open"); 

     } 
     else if (item === null && isTooltip === true) { 

      $chart.tooltip("destroy"); 

     } 

    }); 

});

來源

2013-10-22 user525146

了jQuery UI提示，默認情況下，需要在其上彈出，該元件具有title attribute（這是UI如何jQuery的知道哪些元素事件綁定）。此代碼的第一行：

$chart.attr("title", content ) 
     .tooltip({position: evtPos, 
       content: content}) 
     .tooltip("open");

設置該屬性，是您在屏幕截圖中看到的內容。

如果將其更改爲：

$chart.tooltip({position: evtPos, 
       content: content, 
       items: '*'}) 
     .tooltip("open");

這仍然應該允許工具提示沒有title文本彈出。小提琴here。

說實話，我發現代碼示例非常鈍。在flot文檔中，您最好在example之後服務。

來源

2013-10-23 01:25:45 Mark

非常感謝。它像一個魅力。我使用了示例工具提示，但後來認爲jQuery的工具提示會更優雅，並找到了示例。我注意到在我的控制檯的else循環中出現了一些錯誤，我有這個錯誤：'未捕獲的錯誤：無法在初始化之前調用工具提示上的方法;試圖調用方法'destroy'' – user525146

@ user525146，我沒有看到任何控制檯的錯誤消息在Chrome瀏覽器，你使用的瀏覽器？ – Mark

我正在使用chrome，但使用不同的數據。我不知道爲什麼它會這樣做，在我的情況下 – user525146

使用jQuery的工具提示與flot圖表

回答

相關問題