devextreme/dist/transpiled/ui/tooltip/tooltip.js

HTML5 JavaScript Component Suite for Responsive Web Development

"use strict";

var $ = require("../../core/renderer"),
    Guid = require("../../core/guid"),
    registerComponent = require("../../core/component_registrator"),
    extend = require("../../core/utils/extend").extend,
    Popover = require("../popover"),
    TOOLTIP_CLASS = "dx-tooltip",
    TOOLTIP_WRAPPER_CLASS = "dx-tooltip-wrapper";

var Tooltip = Popover.inherit({
    _getDefaultOptions: function _getDefaultOptions() {
        return extend(this.callBase(), {
            /**
            * @name dxTooltipOptions.toolbarItems
            * @publicName toolbarItems
            * @hidden
            * @inheritdoc
            */
            toolbarItems: [],

            /**
            * @name dxTooltipOptions.showCloseButton
            * @publicName showCloseButton
            * @hidden
            * @inheritdoc
            */
            showCloseButton: false,

            /**
            * @name dxTooltipOptions.showtitle
            * @publicName showTitle
            * @hidden
            * @inheritdoc
            */
            showTitle: false,

            /**
            * @name dxTooltipOptions.title
            * @publicName title
            * @hidden
            * @inheritdoc
            */
            title: null,

            /**
            * @name dxTooltipOptions.titleTemplate
            * @publicName titleTemplate
            * @hidden
            * @inheritdoc
            */
            titleTemplate: null,

            /**
            * @name dxTooltipOptions.onTitleRendered
            * @publicName onTitleRendered
            * @hidden
            * @inheritdoc
            */
            onTitleRendered: null,
            bottomTemplate: null,
            propagateOutsideClick: true
        });
    },

    _render: function _render() {
        this.$element().addClass(TOOLTIP_CLASS);
        this._wrapper().addClass(TOOLTIP_WRAPPER_CLASS);
        this.callBase();
    },

    _renderContent: function _renderContent() {
        this.callBase();

        this._contentId = "dx-" + new Guid();

        this._$content.attr({
            "id": this._contentId,
            "role": "tooltip"
        });

        this._toggleAriaDescription(true);
    },

    _toggleAriaDescription: function _toggleAriaDescription(showing) {
        var $target = $(this.option("target")),
            label = showing ? this._contentId : undefined;

        this.setAria("describedby", label, $target);
    }
});

registerComponent("dxTooltip", Tooltip);

module.exports = Tooltip;