jquery - 在页面组件的鼠标悬停时将 Wicket 面板内容显示为工具提示

Question

我有一个检票口 MultiLineLabel，其内容来自数据库。现在我需要将此 MultiLineLabel 文本显示为页面上悬停时的工具提示。

你能建议我怎么做吗（我是新来的检票口）。我应该使用 jquery 解决方案还是应该在我的页面上添加onmouseover和？onmouseout AjaxEventBehaviors

当我尝试jquery 解决方案时，我不知道如何维护工具提示中的换行符。

请向我提供您拥有的任何示例。

Answer 1

我已经使用标准标签对此进行了测试，并且可以正常工作：

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'”替换为与您的组件匹配的选择器。

我已经测试过了，它似乎工作。