將Wicket面板內容顯示爲鼠標懸停在頁面組件上的工具提示

我有一個MultiLineLabel檢票，它的內容來自數據庫。現在我需要將這個MultiLineLabel文本顯示爲懸停在頁面上的工具提示。將Wicket面板內容顯示爲鼠標懸停在頁面組件上的工具提示

你可以請我建議我應該怎麼做（我是新來的檢票口）。我應該去與jQuery解決方案或我應該去在我的網頁上添加onmouseover和onmouseoutAjaxEventBehaviors？

當我嘗試jquery solution我不知道如何維護工具提示中的換行符。

請給我提供你有的任何例子。

2012-09-03 user1521828

我曾與一個標準的標籤測試，這和它的作品：

Label ml; 
String msg = "Hello! \n I'm here."; 
add(ml = new Label("multiline",msg)); 
ml.add(AttributeModifier.append("title", msg));

修訂

可惜這不是能夠控制與屬性「標題」產生的工具提示的風格，因爲它是一個操作系統本地組件。但是，您可以輕鬆調整您在http://www.mkyong.com/jquery/how-to-create-a-tooltips-with-jquery/找到的代碼。你可以把工具提示文本中的自定義屬性，我們稱之爲「的ToolTipText」：

String tooltipMsg = Strings.toMultilineMarkup(yourMsgFromDb).toString(); 
... 
yourLabel.add(AttributeModifier.append("toolTipText", tooltipMsg));

請注意，您必須使用toMultilineMarkup保持在工具提示換行符。現在你應該稍微修改功能showTooltip使用插入自定義屬性值：

var showTooltip = function(event) { 
    $('div.tooltip').remove(); 

    $('<div class="tooltip">' + $(this).attr('toolTipText') +'</div>') 
      .appendTo('body'); 

    changeTooltipPosition(event); 
};

最後，你必須告訴JQuery的使用提示與您的標記。您必須將「span＃hint，label＃username'」替換爲與您的組件匹配的選擇器。

我測試過了，它似乎工作。

來源

2012-09-03 14:51:20

謝謝安德烈。在將此標記爲答案之前，請您建議我是否可以將cutom CSS應用於使用「title」屬性創建的工具提示（類似於上面示例URL中的.tooltip樣式）？我也會測試它。 – user1521828

感謝安德烈的解決方案！ – user1521828

嗨安德烈，一個跟進問題。當我實際執行時，我遇到了這個問題，我如何能夠在html上顯示。我正在使用如下所示：。沒有文字顯示，因爲在代碼中我沒有將任何文本分配給標籤，我將其分配給新屬性。現在你可以給我一個例子，我如何顯示說這個跨度使用CSS的圖像。有沒有其他方法？ – user1521828

將Wicket面板內容顯示爲鼠標懸停在頁面組件上的工具提示

回答

相關問題