Tooltip

Deprecation Warning! The content below is only applicable for use within deprecated 1.x versions of CA Agile Central's App SDK. Use of the component(s) and/or code on this page is not supported. To develop custom apps within our current environments, please see App SDK 2.0 documentation.

The Tooltip component provides an easy way to display tooltips in an app.

tooltip

Tooltip includes the following topics:

Create a tooltip

First include the App SDK JavaScript:

<script type="text/javascript" src="/apps/[version]/sdk.js"></script>

Instantiate a new tooltip:

var tooltip = new rally.sdk.ui.basic.Tooltip(config);

The parameters for rally.sdk.ui.basic.Tooltip are as follows:

Parameter Description Example
config* A configuration object { message: "Tooltip!", position: "after" }
  * = required parameter

The tooltip configuration object supports the following properties:

Parameter Description
message* The tooltip message to display
position The location of the tooltip: "before", "after", "above", "below"
(default = "after")
  * = required parameter

Display a tooltip

Once created, use the display method display the tooltip when the target element is hovered over:

tooltip.display(domElement);

Parameter Description Example
domElement* The element which when hovered over will trigger the tooltip.
This may be either an element or an element ID.
"trigger",
document.getElementById("trigger")
  * = required parameter

Static methods

Static methods are also provided in order to show tooltips on demand.

Method Name Parameters Description Example
show element*, message*, position, timeout Display the specified message in a tooltip positioned as specified.
If timeout is specified the tooltip will be automatically hidden after that interval (ms).
rally.sdk.ui.basic.Tooltip.show("testDiv", "Tooltip!", "after", 3000);
hide element* Hide the tooltip associated with the specified element. rally.sdk.ui.basic.Tooltip.hide("testDiv");
 * = Required parameter

Example

Copy and paste the following into a CA Agile Central custom app page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Copyright (c) 2010-2011 CA Agile Central Software Development Corp. All rights reserved -->
<html>
<head>
   <title>Tooltip Example</title>
   <meta name="Name" content="Component Example: Tooltip" />
   <meta name="Version" content="2010.4" />
   <meta name="Vendor" content="CA Agile Central Software" />
   <script type="text/javascript" src="/apps/1.26/sdk.js"></script>
   <script type="text/javascript">

     function onLoad() {
       //Create a hover tooltip
       var tooltip = new rally.sdk.ui.basic.Tooltip({
         message: "span1 hover!",
         position: "after"
       });
       tooltip.display("span1");
    }

    function showTooltip(element) {
       //Show a tooltip for 3 seconds
       rally.sdk.ui.basic.Tooltip.show(element, "Tooltip!", "after", 3000);
     }

    rally.addOnLoad(onLoad);

   </script>
</head>
<body>
<span id="span1">Hover!</span>
<br/>
<br/>
<button type="button" onclick="showTooltip(this);">Show Tooltip</button>
</body>
</html>