爲什麼不是這個jQuery UI工具提示按預期工作？

我一直在爲這幾天的工作。我有一個應用程序使用jQuery UI作爲datepickers。現在，我還需要一些增強的工具提示，所以我很高興看到向jQueryUI添加了工具提示窗口小部件。爲什麼不是這個jQuery UI工具提示按預期工作？

我仍然需要支持舊版IE，所以我不能使用jQuery 2.0。我已升級到jQuery 1.9.1和jQuery UI 1.10.3。

無論如何，工具提示並不像我所期望的那樣行事。我正在使用此代碼創建工具提示：

$(document).ready(function() { 
     $('.tooltipStyle').tooltip({ 
      position: { my: "top left", at: "bottom center" }, 
      content: function() { 
       return "This tooltip is a function return value with <b>HTML content</b>"; 
      } 
     }); 
    });

在jsFiddle上的完整演示：http://jsfiddle.net/2agHC/4/。（請注意，我使用左側的外部資源加載了jQuery和jQuery UI的匹配版本。）

首先，我無法獲取位置屬性的工作。我預計工具提示將出現在它所連接的控件下方，其左上角以控件爲中心。（我做了灰色以便可見。）但是，工具提示出現在窗口的左邊緣。

其次，我要點擊在DIV爲了使工具提示中顯示，而我期待，它將與懸停出現。

我覺得我錯過了一些關於工具提示應該如何使用的基本問題，但就像我說過的，我已經在這裏呆了好幾天了。任何人都可以解釋我錯過了什麼嗎？

來源

2013-05-07 JeffK

你想要這樣嗎？ jsfiddle

$(document).ready(function() { 
    $('.tooltipStyle').tooltip({ 
     position: { my: "left top", at: "bottom" }, 
     content: function() { 
      return "This tooltip is a function return value with <b>HTML content</b>"; 
     } 
    }); 
});

如果這不是你想要的行爲，請回復。另外閱讀jQuery UI Position實用程序上的文檔可能會有所幫助。

我猜你所說的點擊就在那裏，因爲工具提示是直接懸停在元素上方。雖然在您的示例中，我不需要單擊...彈出工具提示，立即隱藏並再次顯示。

爲了使其完整（如從實況eclps'摘錄）

我（默認：「中心」）

類型：String

定義哪個元素上的位置定位以與目標元素對齊：「水平垂直」對齊。 [...]

可接受的水平值：「左」，「中心」，「右」。可接受的垂直值：「頂部」，「中心」，「底部」。例如：「左上方」或「中心」。每個維度還可以包含偏移量，以像素或百分比表示，例如「右+ 10上 - 25％」。百分比偏移量相對於被定位的元素。

來源

2013-05-07 18:52:06 SirDerpington

你使用了什麼瀏覽器？我的問題中的評論是我在Chrome上看到的。 – JeffK 2013-05-07 19:22:46

我想我的交換位置參數被解析爲'position {my：「left」，at：「center」}'這解釋了我所看到的。它看起來像我需要的位置：{我的：「左上方」，在：「中心底部」}。 – JeffK 2013-05-07 19:24:06

用Firefox 20.0.1製作小提琴。只是用Chrome 26.0.1410.64查看它。工作也很好。我的解決方案和你的「中心底部」有什麼不同？因爲我沒有看到一個。 – SirDerpington 2013-05-07 19:26:51

從jQuery UI Position docs關於「我的」：

該元件上的位置被定位成與對準目標元素定義：「水平垂直」對準。 [...]可接受的水平值：「左」，「中」，「右」。可接受的垂直值：「頂部」，「中心」，「底部」。例如：「left top」或「center center」。

您需要調換您的位置值。如SirDerpington的答案所示。

position: { my: "left top" },

來源

2013-05-07 19:05:42 eclps

爲什麼不是這個jQuery UI工具提示按預期工作？

回答

相關問題