Expand my Community achievements bar.

mouse hover functionality

Avatar

Former Community Member
This is my first attempt at developing a form with LC Designer. I have some JavaScript experience from web development.



I'm trying to create a form that includes something like you might see on a website with CSS. I want a hidden text area to become visible when a user hovers over text in another area of the form. For example, the user might see a check box that says "Check here if you completed any conservation plans in 2007." I want the user to be able hover over the term "conservation plans" and get a definition in an area to the left of the question.



I've been able to get this to work for objects like check boxes by applying
objectPath.presence="visible" on the mouseEnter event of the check box. But this is kind of annoying because it applies each time the user enters the check box and there is no way to indicate to the user a definition is applied to the box.



Is there any way to have the event tied to the caption/text rather than the check box? I would also like that text to be underlined so that the user knows there is a definition.



Any thought or help are appreciated.

Justin
5 Replies

Avatar

Former Community Member
If the text is in a TextField (and is not just a text object), the approach above works, by setting objectPath.presence="visible" for the mouseEnter event for the TextField, and by setting objectPath.presence="invisible" for the mouseExit event for the TextField.



Also, if you want there not to be a blank space where then the item is invisible, set it to be "hidden" instead, and set the layout of the page to be flowable.



Sarah

Avatar

Former Community Member
Aorry, just re- read the original query.



Have a checkbox with "Check here if you completed any"



then have "conservation plans" in a seperate text field, and "in 2007" in a third text field. (these can all be grouped if required)



Not a particularly neat approach, but it works..

Avatar

Former Community Member
Sarah,



Thanks for the post. I tried this and it does seem to work. Another option I thought of was overlaying a button on the text where I want the event to occur. Then applying the actions to the button. That works as well. Like you said, it's not pretty but it works.



JS

Avatar

Level 9
Why not just set the tooltip field (on the Object/accessibility tab). This will automatically pop up the tooltip when you hover over the field.

Howard

http://www.avoka.com