Define tooltips with PowerTip

Once the PowerTip module is active, we can add one or more tooltips to the pages through a dynamic content spot, or a config markup type subcontribution in a module.

The PowerTip offers flexible tip positioning at the compass points. We can position the tip so it is never clipped off the edge of the view port. And, we can let the tip remain visible while the mouse is on it so the user can interact with the contents of the tip. Here is an example of PowerTip usage code for those options:

<script type="text/javascript">
 $(function() {
  $('#myelement').data('powertiptarget', 'mytip');
  $('#myelement).powerTip({ placement: 's', mouseOnToPopup: true, smartPlacement: true });
 });
</script>
<div  style="display:none">
 <input type="text" />
 <input type="button" value="Search" />
</div>

In this example, myelement must be replaced with the ID of the element on the page to add the tip to. And mytip is the ID of the div that is the tip itself, which is defined by the div in the example. Notice the tip div is set to display:none initially. The PowerTip shows it when the user mouses over the myelement element.

Define multiple tooltips by copying the data and PowerTip lines for each tooltip and copying the div block for each tooltip. Modify the IDs for each one.

We can put the example code anywhere on the page. We can add the tooltip to a dynamic content spot to add the code to the page. Or, we can add the code to a config markup type subcontribution of a module.

If the markup is visible and needs to be injected at a specific point on a page, use a dynamic content spot. If the markup is not visible initially and can be injected anywhere on a page, use the subcontribution method. The tooltip code can be anywhere on the page, so use the subcontribution method and follow these steps

1. Create a theme_powertips subfolder in the theme's modules folder.

2. Your theme_powertips module will prereq the jquery_powertip module, so create a file named prereqs.properties in the theme_powertips folder with the following content:
   jquery_powertip

3. Create a config subfolder in the theme_powertips folder.

4. Create a theme_powertips.html markup file in the config folder. We can copy and paste the following code as an example:

   <script type="text/javascript">
    $(function() {
     $('#wpthemeHelp img').data('powertiptarget', 'wpthemeHelpTip');
     $('#wpthemeHelp img').powerTip({ placement: 's', mouseOnToPopup: true, smartPlacement: true });
    });
   </script>
   <div  style="display:none">
    <form method="get" action="http://www-10.lotus.com/ldd/portalwiki.nsf/xpSearch.xsp" target="wiki">
     <input type="text" name="searchValue" />
     <input type="submit" value="Search" />
    </form>
   </div>

   This example assumes the theme has a help element with ID wpthemeHelp similar to the default theme. If the theme does not have an element with ID wpthemeHelp, then change the two instances of '#wpthemeHelp img' to a selector that identifies one of the elements in the theme, and rename the two instances of 'wpthemeHelpTip'.

   This example uses a simple form on the tooltip that searches the HCL WebSphere Portal wiki documentation. We can change the markup in the tooltip div entirely to whatever we need to appear on the tooltip.

5. Add the module theme_powertips to the module listings in the jQuery profile file.

6. Invalidate the cache so the Portal server includes our profile and module changes. To invalidate the cache, click Theme Analyzer > Utilities > Control Center > Invalidate Cache.

Results

Go to the page that has the jQuery profile applied, move the mouse over the help icon, or whichever theme element specified in step 4, and we see the tip appear.

If anything is not working correctly, we can troubleshoot the modules by clicking the Administration menu icon in the toolbar, and then going toPortal Analysis > Theme Analyzer > Examine Modules by Profiles. Expand the theme in the tree and select the jQuery profile, such as jQuery Deferred, in the tree and examine the profile. Double-click the jQuery profile in the tree. Expand the Modules folder in the tree and select one-by-one the various jQuery modules, jquery, jquery_powertip, and theme_powertips. For each, examine the details to see if everything looks correct (in particular the prereqs and the contributions). If we spot and fix a problem, be sure to invalidate the cache after so the Portal server picks up the change.

Parent Add jQuery to a theme