...
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:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<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:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
$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".