Question

I have a wicket MultiLineLabel which has its contents coming from database. Now I need to display this MultiLineLabel text as a tooltip on hover of a on a page.

Can you please suggest me how I should go about this (i am new to wicket). Should i be going with jquery solution or I should go with adding onmouseover and onmouseout AjaxEventBehaviors on my page?

When I tried the jquery solution I do not know how can i maintain the line breaks in the tooltip.

Please provide me with any examples you have.

Answer 1

I’ve tested this with a standard label and it works:

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

UPDATED

Unfortunately it’s not possible to control the style of the tooltip generated with the attribute ‘title’ because it’s a OS native component. However you could easily adapt the code you have found at http://www.mkyong.com/jquery/how-to-create-a-tooltips-with-jquery/.
You can put the text of the tooltip in a custom attribute, let’s call it ‘toolTipText’:

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

Please note that you must use toMultilineMarkup to maintain the line breaks in the tooltip.
Now you should slightly modify function showTooltip to use the value inserted into the custom attribute:

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

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

  changeTooltipPosition(event);
};

Finally, you have to tell JQuery to use tooltip with your tag. You must replace “span#hint,label#username'” with the selector matching your component.

I’ve tested and it seems to work.