js/core/TooltipManager.js
function (templateName, target, attributes, options) {
            if (!this.$container) {
                this.$container = this.createComponent(HtmlElement, {"class": this.$.containerClass, "tagName": "div"});
                this.$stage.addChild(this.$container);
            }
            var tooltip = this.getTooltipByNameAndTarget(templateName, target);
            if (tooltip) {
                return tooltip;
            } else {
                options = options || {};

                if (target && target.isRendered()) {
                    var content = options.content,
                        animationClass = this.$.animationClass || options.animationClass,
                        duration = this.$.duration || options.duration;

                    var rect = target.$el.getBoundingClientRect();

                    // create a instance
                    tooltip = this.createComponent(Tooltip,
                        {
                            manager: this,
                            "class": templateName,
                            animationClass: animationClass,
                            left: rect.left,
                            top: rect.top,
                            width: rect.width,
                            height: 0 // due to missing pointer event support in IE
                        }
                    );

                    var templateInstance = this.$templates[templateName].createInstance(attributes || {});

                    templateInstance.$classAttributes = templateInstance.$classAttributes || [];
                    // add class attributes
                    for (var key in attributes) {
                        if (attributes.hasOwnProperty(key)) {
                            templateInstance.$classAttributes.push(key);
                        }
                    }
                    // add template instance
                    tooltip.addChild(templateInstance);
                    tooltip.bind('dom:remove', function () {
                        tooltip.destroy();
                    });
                    // if content
                    if (content) {
                        templateInstance.$children = content.getChildren();
                        templateInstance._renderChildren(templateInstance.$children);
                    }

                    this.$tooltips.push({
                        target: target,
                        templateName: templateName,
                        instance: tooltip
                    });

                    this.$container.addChild(tooltip);

                    var self = this;
                    if (duration && duration > 0) {
                        setTimeout(function () {
                            self.hideTooltip(tooltip);
                        }, duration)
                    }

                    return tooltip;
                } else {
                    throw new Error("No target for tooltip specified");
                }
            }


        }
function (templateName, target, attributes, options) {
            if (!this.$container) {
                this.$container = this.createComponent(HtmlElement, {"class": this.$.containerClass, "tagName": "div"});
                this.$stage.addChild(this.$container);
            }
            var tooltip = this.getTooltipByNameAndTarget(templateName, target);
            if (tooltip) {
                return tooltip;
            } else {
                options = options || {};

                if (target && target.isRendered()) {
                    var content = options.content,
                        animationClass = this.$.animationClass || options.animationClass,
                        duration = this.$.duration || options.duration;

                    var rect = target.$el.getBoundingClientRect();

                    // create a instance
                    tooltip = this.createComponent(Tooltip,
                        {
                            manager: this,
                            "class": templateName,
                            animationClass: animationClass,
                            left: rect.left,
                            top: rect.top,
                            width: rect.width,
                            height: 0 // due to missing pointer event support in IE
                        }
                    );

                    var templateInstance = this.$templates[templateName].createInstance(attributes || {});

                    templateInstance.$classAttributes = templateInstance.$classAttributes || [];
                    // add class attributes
                    for (var key in attributes) {
                        if (attributes.hasOwnProperty(key)) {
                            templateInstance.$classAttributes.push(key);
                        }
                    }
                    // add template instance
                    tooltip.addChild(templateInstance);
                    tooltip.bind('dom:remove', function () {
                        tooltip.destroy();
                    });
                    // if content
                    if (content) {
                        templateInstance.$children = content.getChildren();
                        templateInstance._renderChildren(templateInstance.$children);
                    }

                    this.$tooltips.push({
                        target: target,
                        templateName: templateName,
                        instance: tooltip
                    });

                    this.$container.addChild(tooltip);

                    var self = this;
                    if (duration && duration > 0) {
                        setTimeout(function () {
                            self.hideTooltip(tooltip);
                        }, duration)
                    }

                    return tooltip;
                } else {
                    throw new Error("No target for tooltip specified");
                }
            }


        }
function ( templateName , target , attributes , options ) { if ( ! this . $container ) { this . $container = this . createComponent ( HtmlElement , { "class" : this . $ . containerClass , "tagName" : "div" } ) ; this . $stage . addChild ( this . $container ) ; } var tooltip = this . getTooltipByNameAndTarget ( templateName , target ) ; if ( tooltip ) { return tooltip ; } else { options = options || { } ; if ( target && target . isRendered ( ) ) { var content = options . content , animationClass = this . $ . animationClass || options . animationClass , duration = this . $ . duration || options . duration ; var rect = target . $el . getBoundingClientRect ( ) ; // create a instance tooltip = this . createComponent ( Tooltip , { manager : this , "class" : templateName , animationClass : animationClass , left : rect . left , top : rect . top , width : rect . width , height : 0 // due to missing pointer event support in IE } ) ; var templateInstance = this . $templates [ templateName ] . createInstance ( attributes || { } ) ; templateInstance . $classAttributes = templateInstance . $classAttributes || [ ] ; // add class attributes for ( var key in attributes ) { if ( attributes . hasOwnProperty ( key ) ) { templateInstance . $classAttributes . push ( key ) ; } } // add template instance tooltip . addChild ( templateInstance ) ; tooltip . bind ( 'dom:remove' , function ( ) { tooltip . destroy ( ) ; } ) ; // if content if ( content ) { templateInstance . $children = content . getChildren ( ) ; templateInstance . _renderChildren ( templateInstance . $children ) ; } this . $tooltips . push ( { target : target , templateName : templateName , instance : tooltip } ) ; this . $container . addChild ( tooltip ) ; var self = this ; if ( duration && duration > 0 ) { setTimeout ( function ( ) { self . hideTooltip ( tooltip ) ; } , duration ) } return tooltip ; } else { throw new Error ( "No target for tooltip specified" ) ; } } }
Shows a tooltip with the given template add the target element

@param {String} templateName - The name of the template to use
@param {js.core.Component} target - The target element
@param {Object} attributes - the
@param {Object} options  - Options for displaying the
@param {Number} options.duration - default is false. Duration for auto-hide of tooltip
@param {String} options.animationClass - default is set by TooltipManager.
@returns {js.core.TooltipManager.Tooltip}
Shows a tooltip with the given template add the target element