Our end users – inspired by the Interaction Designers – have requested a superduper tooltip for their fields. Not the shy title popup label that browsers show for elements with the title attribute set (limited in number of characters and layout options), no, a real sturdy tooltip. It has to look something like this:
Implementing this tooltip on all fields that we want to specify one for is somewhat of a challenge. Not because it is complicated: it is very simple to add such a hovering tooltip to an input component. All it takes is
setting the onmouseout and onmouseover attributes:
<af:inputText id="EmpInDeptEname"
value="#{bindings.EmpInDeptEname.inputValue}"
label="#{nls['EMPINDEPT_ENAME']}"
onmouseover="showToolTip(this,'#{nls['EMPINDEPT_ENAME']}','#{nls['EMPINDEPT_ENAME_HINT']});"
onmouseout="hideToolTip();"></af:inputText>
The real challenge is adding these attributes to all elements that we need a tooltip for. That is lot of work, not a lot of fun. However, we generate our application using JHeadstart. So we should be able to leverage the generator.
And that happens to be very easy. All we need to do is change a few lines in a single template. The file templates/default/common/common_items.vm contains the macro ITEM_HINT. It will set either the shortDesc or the hint attribute of Form Input Elements. However, with just a tiny change, we can make it write the onmouseover and onmouseout attributes that we desire:
#macro (ITEM_HINT)
## 1.7AMIS1.0 commented out #if (${JHS.current.item.hintText}!='')#if ($JHS.service.showHintTextAsPopup)#JHS_PROP("shortDesc" ${JHS.nls(${JHS.current.item.hintText}, "${JHS.current.group.name}_${JHS.current.item.name}_HINT")})#else#JHS_PROP("tip" ${JHS.nls(${JHS.current.item.hintText}, "${JHS.current.group.name}_${JHS.current.item.name}_HINT")})#end#end#end
## 1.7AMIS1.0 modified, to support AMIS style tooltip
#if (${JHS.current.item.hintText}!='') onmouseover="showToolTip(this,'${JHS.nls(${JHS.current.item.promptInForm}, "${JHS.current.group.name}_${JHS.current.item.name}")}','${JHS.nls(${JHS.current.item.hintText}, "${JHS.current.group.name}_${JHS.current.item.name}_HINT")}');"
onmouseout="hideToolTip();"#end#end
Note: you should (and we did that, honestly) create your own template as a copy of common_items.vm, rather than change the original template file as shipped with JHeadstart. We created /templates/amis/common/amis_common_items.vm and registered our own file in templates/config/jag-config.xml.
To also generate the tooltip into the column header, to achieve this result:
we need to add a call to the ITEM_HINT() macro in the COLUMN_HEADER_LABEL():
#macro (COLUMN_HEADER_LABEL)
value="${JHS.nls(${JHS.current.item.promptInTable}, "${JHS.current.group.name}_TABLE_${JHS.current.item.name}")}"
## 1.7AMIS1.0 Added the call to ITEM_HINT()
#ITEM_HINT()
#end
There is one tiny little issue: the tooltip should also be shown when the item is read only. However, it is not: the onmouseover and onmouseout attributes are not rendered for the items in read only mode. I am not sure yet how to deal with that particular problem. wrapping every item in a PanelGroup and setting the mouse attribute on the PanelGroup? Use disabled rather than read-only? Make use of the fact that every read only element is rendered using a SPAN that has the element’s ID as its ID?
