How to Add Tool Tips

Viewpoint
Teradata Viewpoint is Teradata's strategic and innovative SOV (single operational view) for Teradata DB, Aster, and HDP Hadoop systems management and monitoring that enables Teradata's Unified Data Architecture (UDA).
Teradata Employee

How to Add Tool Tips

Viewpoint recommends using the tool-tipping feature built into all supported browsers as the preferred way to show supporting or explanatory text. This is straightforward and easy to use, and does not add the performance overhead of the custom tooltip described below. The TDTTM implementation described below is deprecated as of Viewpoint 14.01

Native Browser Tool Tips

The native browser tool tip implementation uses the 'title' tag, and can be used as below.

<div id="myDiv" title="${myStaticTip}">

The remainder of this documented is deprecated as of Viewpoint 14.01.

How to Make Tool Tips [Deprecated]

The TDToolTipManager (TDTTM) 

The TDTTM is javascript manager that will manage all tool tips you register over their lifetime. The TDTTM is integrated into the Teradata Viewpoint Portal, so there is no need to add any .js includes. The portlet only needs to register its tool tips with the TDTTM when the portlet is registered, and unregister the tool tips when the portlet is removed from the page. An explanation of this process follows.

Tool-tip types

There are two different types of tool tips that you can use for your portlet:

  • Static Tooltips - Static tooltips do not change throughout their lifetime. Their text always stays the same. A static tool tip in your .properties file looks like this:
myStaticTip=This is my static tooltip. The text will never change.

Dynamic Tooltips - Dynamic tooltips change over time, usually through a page or an AJAX refresh. A dynamic tooltip allows the programmer to specify a value (or values) in a tool tip that will not be known until runtime. A dynamic tooltip in your .properties file looks like this:

myDynamicTip=This my dynamic tooltip. The time is now {time}. The day is {day}.

The "{time}" and "{day}" variables are the part of the tool tip that is specified dynamically when the tool tip is generated. At runtime, when the tool tip is invoked (when the user mouses over it), the "{time}" and "{day}" variables are replaced by the values specified.

Registering the tool tips

All tool tips need to be registered and loaded by the TDTTM so the tool tips in them can be used. To register the tool tips with the TDTTM, make a call to the TDTTM registerToolTips() function inside the TDPortalManager.onPortletReady() function:

TDPortalManager.onPortletReady('${context}', function() {
TDToolTipManager.registerToolTips('${context}', {
propertyMap:{
'teradata_portlets_SystemHealth':'SystemHealthPortlet',
},
elementId:'${context}_Container'
});
});

The registerToolTips() function requires two parameters:

  1. The first parameter is the unique context id of portlet that is registering the tooltips.
  2. The second parameter is a javascript hash map that requires two elements in the hash map:
    • propertyMap: The propertyMap hash should contain a javascript hash of all the tool tip sources that will be loaded and used for tool tips on this portlet. Each key in the hash specifies the propertyKeyName used in your JSP (see below), and each value is the internationalization context which contains your tool tips (XXX XREF).
    • elementId: The elementId hash is the string name id that represents the outer-most element in which all tool tips reside. Usually, this is the id of the outer-most container div for the portlet in getting tool tips.

Unregistering the tool tips

All tool tips that were registered with the TDTTM also need to be unregistered when the portlet is removed from the portal. To unregister tool tips, make a call to the TDTTM unregisterContext() function inside the TDPortalManager.onPortletRemove() function:

TDPortalManager.onPortletRemove('${context}', function() {
TDToolTipManager.unregisterContext('${context}');
});

The unregisterContext() function only requires the unique context id that was used when the portlet was registered as a parameter. All of the event handlers that were attached to the page for the registered tool tips are removed.

Specifying tool tips in JSP files

The last thing you need to do is specify where to use the individual tool tips you have specified in your .properties files. Tool tips can be specified for any valid HTML element (i.e., div, img, etc.). There are two formats for specifying tool tips depending on whether your tool tips are static text or dynamic text. Both examples (below) use the following .properties file:

myStaticTip=This is my static tooltip. The text will never change.
myDynamicTip=This my dynamic tooltip. The time is now {time}. The day is {day}.

Static tool tip text

A static tool tip on a div element looks like this:

<div id="staticDiv" tdtooltip="teradata_portlets_test,myStaticTip">
This div has a static tool tip when the mouse is over it!
</div>

The static tool tips only have two parameters specified in the tdtooltip attribute. The two parameters are separated by a comma in the tdtooltip attribute.

  • The first parameter is the propertyKeyName that you will be referencing for a particular tool tip.
  • The second parameter is the key name of the tool tip that is being referenced in the specified .properties file.

Now, whenever the user mouses anywhere over the "staticDiv" element, a tool tip pop-up appears with the text "This is my static tooltip. The text will never change."

Dynamic tool tip text

A dynamic tool tip on a div element would looks like this:

<div id="dynamicDiv" tdtooltip="
teradata_portlets_test,myDynamicTip,function(){return{time:'${theTime}',day:'${theDay}'};}">
This div has a dynamic tool tip when the mouse is over it! The time and the day will change.
</div>

The dynamic tool tips are a little more complicated because they require a third parameter that contains the necessary values to populate the dynamic portions of the tool tip:

  1. Same as first parameter in explanation above.
  2. Same as second parameter in explanation above.
  3. The third parameter is where all the dynamic values for the tool tip are specified. The third parameter is an anonymous javascript function that is executed at runtime to retrieve the specified dynamic values. The function should always return a javascript hash map of all the values in the tool tip. In our dynamic example above, the anonymous function returns a hash with the two parameters that are needed to populate the tool tip correctly. The values in the above example, ${theTime} and ${theDay} are simply variables that are passed in by the Spring Model and View for this example. A javascript function that returns the specified values can also be used. The hash keys in the javascript hash map must match the variable names specified in the tool tip declaration. If they do not match, the TDTTM has no way of knowing where you want the value to map to.

Now, if the user mouses over the "dynamicDiv" element on Tuesday, October 16, at 10 AM, a tool tip pop-up appears with the text "This is my dynamic tooltip. The time is now 10 AM. The day is Tuesday, October 16."

Refreshing dynamic tool tips

If you have dynamic tool tips in your portlet with values that need to be refreshed once the portlet has been drawn, you can call the reinitToolTips() function that is built into the TDTTM:

TDToolTipManager.reinitToolTips('${context}', 'myRefreshDivID');

 There are two parameters you must specify in a call to reinitToolTips():

  1. The first parameter is the context id of the portlet that the tool tips were registered under.
  2. The container element id; the container element in which all tool-tipped elements that need to be reinitialized are contained.

Tool tip on a Spring Form tag

If you are adding tool tips to a Spring Form tag (i.e., tool-tipping an input element), you must wrap the Spring Form tag in an element such as a <span> and tool-tip the element because Spring Form tags do not allow the specification of custom attributes. For example:

<span tdtooltip="teradata_portlets_test,myStaticTip"><form:input path="myPath" /></span>
Tags (3)