Tooltip on text of xforms:help workaround

All,

thought I'ld share this one with you all.

I was in the situation where I wanted to have a tooltip show on mouseover of a control, with the text supplied with the xforms:help element. The current implentation of xforms:help requires you to show the help text as a mouseover of a seperate image:

I wanted the tooltip to show when you hovered the mouse over the text instead.

There are some tricky dependencies in the javascript on the existence of an img element, and the help text being contained in a span element directly following the img element (.nextSibling;). I really did not want to get into this, so I decided on a quick fix for my application. Perhaps something can be done to make the help text rendering javascript a bit more modular and extensible? Anyone up for a challenge?

So here is what I did (using nightly build from January 5):

In xforms.js:
-----------------
Line 844, Change:
// Show help tool-tip
var label = target.nextSibling;

To:
// Show help tool-tip
var label = target.nextSibling.nextSibling;

In theme-plain.xsl:
---------------------------
Line 81, Change:
<xhtml:img alt="Help" title="" src="/ops/images/xforms/help.gif" class="{string-join($image-class, ' ')}"/>

To:
<xhtml:div class="{string-join($image-class, ' ')}"/>

In you view:
-----------------
Add a class with name 'xforms-help-image' to the xforms control, like this:
<xforms:output ref="instance('test')/aspic:value" class="xforms-help-image">   
    <xforms:help>help message</xforms:help>
    ...
</xforms:output

Ta-da!

So far I have only tried this with xforms:output, and I'm pretty sure that you'll have to update this code as Orbeon Forms continue their development. But it works for now.

For further information on the tooltip library, check out:
http://www.walterzorn.com/tooltip/tooltip_e.htm

And the settings for the tooltip seems to be set on line 834 in xforms.js:
// Show the help div
tt_Show(event, tooltipDivId, false, 0, false, false,
            ttOffsetX, ttOffsetY, false, false, ttTemp);

This the function signature of tt_show (wz_tooltip.js, line 358):
function tt_Show(t_e, t_id, t_sup, t_delay, t_fix, t_left, t_offx, t_offy, t_static, t_sticky, t_temp)


Hope someone will find this usefull!

Sincerely,
Henrik Pettersen
ASPIC




--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws