Tooltip on Steroids

PrimeFaces published today the blog post PickList on Steroids. I have decided to publish a similar post Tooltip on Steroids. PrimeFaces Extensions "injected steroids" into the Tooltip component. It's hefty strength now. This week I implemented three additional powerful features which I would like to share in this post.

Auto shown tooltips
The autoShow flag enables showing tooltips automatically after page loading. Auto shown tooltips are shown directly after the page has been loaded. Position of an auto shown tooltip is adjusted automatically when the window is resized. This feature is useful when you want to have a wizard or introduction tour with several infos showing when a site is entered the first time. Google and Facebook have a similar concept when introducing new features. Take a look please.

Using:

...
<p:inputText id="txt" title="Type something into this field"/>  
<pe:tooltip for="txt" autoShow="true" myPosition="left center" atPosition="right center"/>
...

Mouse tracking
Mouse tracking enables tooltip's positioning in relation to the mouse. The tooltip follows mouse when mouse moving. Take a look please.

Using:

...
<h:panelGroup id="demoMouse" layout="block" ...>
    Hover over this box to see mouse tracking in action  
</h:panelGroup>  
<pe:tooltip for="demoMouse" value="I position myself at the current mouse position"  
            mouseTracking="true" myPosition="top left" adjustX="10" adjustY="10"/>
...

As you might see, the tooltip also became new attributes adjustX and adjustY to control tooltip's coordinates related to the target element. These are positive or negative pixel values by which to offset the tooltip in the horizontal / vertical planes (x-axis / y-axis).

Client-side API
Tooltip became new widget's methods as well: hide(), show(), reposition() and destroy(). Hide() / show() allow to hide or show tooltips at runtime. Reposition() makes possible to adjust tooltip's position. You can use this method during scrolling, for instance. Destroy() removes tooltip's markup from the DOM. After that the tooltip is not available anymore.

Using:

...
<p:inputText id="txt" title="Type something into this field"/>  
<pe:tooltip for="txt" autoShow="true" widgetVar="tipWidget"/>

<p:commandButton type="button" value="Hide" onclick="tipWidget.hide()"/>
<p:commandButton type="button" value="Show" onclick="tipWidget.show()"/>
...