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

Question

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

你能建议我该怎么做吗(我是 wicket 新手)。我应该使用 jquery 解决方案还是应该在我的页面上添加 onmouseover 和 onmouseout AjaxEventBehaviors ？

当我尝试jquery solution时我不知道如何维护工具提示中的换行符。

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

Answer 1

我已经使用标准标签对此进行了测试，它有效:

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

已更新

不幸的是，无法控制使用“title”属性生成的工具提示的样式，因为它是操作系统 native 组件。不过，您可以轻松地修改您在 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'”替换为与您的组件匹配的选择器。

我已经测试过，它似乎有效。