xforms:help mouseover tooltip on xforms:label text

All,

updates have been made to theme-plain.xsl, which means this trick has to be updated. Some improvements also made (but still a hack...)

Purpose:
To display xforms:help as a mouseover tooltip on the xforms:label itself, instead of a tooltip on an xhtml:img element following the xforms:label element (default behaviour).

Method:
1. Remove the image element from the display using CSS:

        img.xforms-help-image{
            display: none;
        }

2. Add an xforms-help-mage class on the XForms UI control itself. e.g.

        <xforms:trigger appearance="xxforms:link" class="xforms-help-image">

3. Update xforms.js: 

In:
    mouseover: function(event) {... [987]

Change [991-993] :
            if (ORBEON.util.Dom.hasClass(target, "xforms-help-image")) {
                // Show help tool-tip
                var label = target.nextSibling;
To:
            if (ORBEON.util.Dom.hasClass (target, "xforms-help-image")) {
                // Show help tool-tip
                var label = target.nextSibling.nextSibling;

Hope someone will find this usefull.

Henrik Pettersen
Cancer Research UK
http://www.acl.icnet.uk/lab/aspic.html


---------- Forwarded message ----------
From: Henrik Pettersen <[hidden email]>
Date: Jan 7, 2007 4:54 AM
Subject: Tooltip on text of xforms:help workaround
To: [hidden email]

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:
<a href="http://www.walterzorn.com/tooltip/tooltip_e.htm" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">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
<a href="http://www.acl.icnet.uk/lab/aspic.html" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)"> 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