Have questions? Stuck? Please check our FAQ for some common questions and answers.

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

NameSummary
addTooltipInstall a tooltip on an element.
showTooltipShow an installed tooltip.
cancelTooltipHide an installed tooltip.

Directive

NameOther Required AttributesSummary
tooltiptt-msgInstall 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 UsageArgumentsReturn Value
tts.addTooltip(elem, tooltip);

elem - d3 selection of the element you want the tooltip on

tooltip - string of the tooltip message to be displayed

none

showTooltip

Shows a tooltip.

Example UsageArgumentsReturn Value
tts.showTooltip(el, msg);

el - d3 selection of the element you want the tooltip on

msg - string of the tooltip message to be displayed

none

cancelTooltip

Cancels / hides a currently shown tooltip.

Example UsageArgumentsReturn Value
tts.cancelTooltip(el);el - d3 selection of the element that currently has a tooltip on itnone

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".

  • No labels