Attach Tooltip API

Owned by Justin Obara
Last updated: Sept 02, 2015 by Alan HarnumVersion comment
3 min read

Attach Tooltip Overview

Attach Tooltip provides a means for attaching tooltips to various elements in the DOM.  The Attach Tooltip grade is not intended to be used on its own, but provided as a base grade to another component that will use it's capabilities for binding tooltips.

 

 

On This Page
See Also
Still need help?

Join the infusion-users mailing list and ask your questions there.

Adding an Attach Tooltip to a Component/Grade

To mixin the Attach Tooltip into your Component/Grade:

fluid.defaults("my.component", {
    gradeNames: ["gpii.firstDiscovery.attachTooltip", "autoInit"]
});

Grades

The base grades used by the Attach Tooltip:

Model

Path

Description

Values

Default

curentSelectedIndex

The index of the currently selected element

Number

undefined

Subcomponents

Name

Description

Values

Default

tooltip

Specifies the tooltip component to use to create the tooltips.

"fluid.tooltip"

tooltip: {
    type: "fluid.tooltip",
    container: "{attachTooltip}.container",
    options: {
        gradeNames: ["gpii.firstDiscovery.tts.tooltipHookup"],
        model: {
            idToContent: {
                expander: {
                    func: "{that}.getTooltipModel"
                }
            }
        },
        invokers: {
            updateIdToContent: {
                changePath: "idToContent",
                value: {
                    expander: {
                        funcName: "{that}.getTooltipModel"
                    }
                }
            },
            getElementInfo: {
                funcName: "gpii.firstDiscovery.attachTooltip.getElementInfo",
                args: ["{fluid.messageResolver}", "{arguments}.0", "{arguments}.1"]
            },
            getTooltipModel: {
                funcName: "gpii.firstDiscovery.attachTooltip.getTooltipModel",
                // Specifying each elements in the argument list to force them to resolve.
                args: ["{attachTooltip}.dom", "{attachTooltip}.options.tooltipContentMap", "{that}.getElementInfo", "{attachTooltip}"]
            }
        }
    }
}

Options

Name

Description

Values

Default

tooltipOptions

Options to be passed down to the tooltip subcomponent.

(see: fluid.tooltip)

tooltipOptions: {}

tooltipContentMap

Defines the mapping between the names in the selectors block and message bundle for dom elements to have tooltips.

Two methods to define mappings:

 

  1. The direct mapping between one element and one label:

    1. The left hand side is the name in the selectors block for the element to have the tooltip.

      Note: the empty string "" at the left hand is to reference the component container itself. The right hand side is the name in the message bundle referencing the tooltip content for that element.

      {
    "": "containerLabel",
    "back": "backLabel"
}
  2. The mapping btw one common selector used by multiple DOM elements and their correspondig tooltips.

    1. This is typically used by defining tooltips for rendered radio buttons or checkboxes. The left hand side is same as method 1 to define the name in the selectors block for elements to have tooltips. The right hand side is an object with two paths: tooltip & tooltipAtSelect. Their values are arrays. "tooltip" array contains names in the message bundle to be shown when mapped elements are not selected. "tooltipAtSelect" contains names when elements are selected. The number of elements in these arrays should be same as the number of elements that the left hand selector is attached to. 

      "langRow": {
    tooltip: ["label1", "label2"...],
    tooltipAtSelect: ["label1-at-select", "label2-at-select"...]
}

 

 

tooltipContentMap: {}

Dependencies

<script type="text/javascript" src="src/lib/infusion/infusion-custom.js"></script>
<script type="text/javascript" src="src/js/msgLookup.js"></script>
<script type="text/javascript" src="src/js/tooltip.js"></script>