Due to a ransomware attack, the wiki was reverted to a July 2022 version. . We apologize for the lack of a more recent valid backup.
TooltipService
TooltipService is an Angular Factory in the Widget module with the name tooltip.js. It provides an API to install tooltips on elements as well as an Angular directive to install tooltips on HTML elements. To use these functions, see the documentation on injecting Angular services.
A tooltip is a short message that appears over HTML elements to help the user understand the button they are about to click on. An example of a tooltip is below:
API Service Functions
| Name | Summary |
|---|---|
addTooltip | Install a tooltip on an element. |
showTooltip | Show an installed tooltip. |
cancelTooltip | Hide an installed tooltip. |
Directive
| Name | Other Required Attributes | Summary |
|---|---|---|
tooltip | tt-msg | Install a tooltip on an HTML element. |
Function Descriptions
addTooltip
Adds a tooltip to an element. This function will automatically call showTooltip on mouseover and call cancelTooltip on mouseout.
Generally you will only have to use this function, since it calls the others automatically. But if you want to show and hide tooltips on other events, you can use the other functions.
| Example Usage | Arguments | Return Value |
|---|---|---|
tts.addTooltip(elem, tooltip); |
| none |
showTooltip
Shows a tooltip.
| Example Usage | Arguments | Return Value |
|---|---|---|
tts.showTooltip(el, msg); |
| none |
cancelTooltip
Cancels / hides a currently shown tooltip.
| Example Usage | Arguments | Return Value |
|---|---|---|
tts.cancelTooltip(el); | el - d3 selection of the element that currently has a tooltip on it | none |
Directive Usage
tooltip
Tooltips are also able to be used on HTML elements through an Angular directive.
Example Usage in HTML:
<div id="foo-div" tooltip tt-msg="fooTip"></div>
The tooltip directive calls addTooltip for you. The tt-msg attribute is required and its property must be the name of a property on the $scope that holds your string message. For example the fooTip message should be defined in your Angular controller Javascript code as such:
$scope.fooTip = 'A really cool tooltip message';
This will create a tooltip that says "A really cool tooltip message" when you hover over the div with id "foo-div".