Imixs-Faces Tooltips

The Imixs-Faces jQuery UI integration provides a custom tooltip feature. This extends the tooltip feature provided by jQuery UI. The Imixs tooltip feature allows to display html based tooltip content. The tooltip can be added to any page element. The tooltip content need to be placed in a span tag with the class ‘imixs-tooltip’ which follows directly to the source element. See the following example.

<h:commandButton action="home" title=" "
		value="Home">
</h:commandButton>
<span class="imixs-tooltip">Some <b>formated</b> Tooltip<span>

This example displays a tooltip on a command button with html content. The next example shows the imixs-tooltip for a h:panelGroup section:

<h:panelGroup title=" ">
 ........
</h:panelGroup>
<span class="imixs-tooltip">Some <b>formated</b> Tooltip<span>

The tooltip content tag must contain the class ‘imixs-tooltip’ and follow immediate to the source tag. The source tag must provide the attribute ‘title’ which can be empty or blank ' '.

Customize default layout

If you like to customize the default layout of the tooltip generated by imixs-faces you can override the class ‘imixs-tooltip-content’ with is used for the content of a tooltip. In additon you can use your own jquery script to adjust the tooltip. This is usefull to change the size or the position of the tooltip itself. See the following example which changes the default position of the imixs tooltips:

$("span.imixs-tooltip" ).prev().tooltip({ position: { position: { my: "left+15 center", at: "right center"  } });

The next example changes only the tooltip behavior of specific tooltips located inside a imixs-portlet element:

$(".imixs-portlet span.imixs-tooltip" ).prev().tooltip({ position: { my: "left top", at: "left+10 bottom",collision: "flip" } });

If you like to change the style class of the tooltip see the next example:

$("span.imixs-tooltip" ).tooltip({ tooltipClass: "custom-tooltip-styling" });

Finally you can also disable the tooltips for specific elements:

$(".imixs-portlet span.imixs-tooltip" ).prev().tooltip({ disabled: true  });

Refresh Tooltip Layout after Ajax call

After a ajax call the tooltip layout need to be updated. For this the method ‘layoutImixsTooltip’ can be used. See the following example:

 	// This method layouts the some sections with the imixs layout  
	function refreshViewLayout(data) {
		if (data.status === 'success') {
			$('.imixs-footer,.imixs-header').imixsLayout();
			$( "span.imixs-tooltip" ).layoutImixsTooltip();
		}
	}
	....

	<h:commandButton value="#{message.search}"
		actionListener="#{searchController.doSearch}" >
		<f:ajax render="@form" onevent="refreshViewLayout" />
	   </h:commandButton>
   ....