salix/client/core/src/tooltip/tooltip.js

import {module} from '../module';
import './style.css';

tooltip.$inject = ['$document', '$compile'];
function tooltip($document, $compile) {
    return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {
            var tip = $compile('<div class="mdl-shadow--2dp" ng-class="tipClass">{{ text }}<div class="tooltip-arrow"></div></div>')(scope);
            var tipClassName = 'tooltip';
            var tipActiveClassName = 'tooltip-show';

            scope.tipClass = [tipClassName];
            scope.text = attrs.vnTooltip;

            if (attrs.tooltipPosition) {
                scope.tipClass.push('tooltip-' + attrs.tooltipPosition);
            } else {
                scope.tipClass.push('tooltip-down');
            }

            $document.find('body').append(tip);

            element.bind('mouseover', function(e) {
                tip.addClass(tipActiveClassName);

                let pos = e.target.getBoundingClientRect();
                let tipPos = tip[0].getBoundingClientRect();
                let offset = {top: 0, left: 0};
                let tipWidth = tipPos.width || tipPos.right - tipPos.left;
                let tipHeight = tipPos.height || tipPos.bottom - tipPos.top;
                let elWidth = pos.width || pos.right - pos.left;
                let elHeight = pos.height || pos.bottom - pos.top;
                let tipOffset = 10;

                if (tip.hasClass('tooltip-right')) {
                    offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
                    offset.left = pos.right + tipOffset;
                } else if (tip.hasClass('tooltip-left')) {
                    offset.top = pos.top - (tipHeight / 2) + (elHeight / 2);
                    offset.left = pos.left - tipWidth - tipOffset;
                } else if (tip.hasClass('tooltip-down')) {
                    offset.top = pos.top + elHeight + tipOffset;
                    offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
                } else {
                    offset.top = pos.top - tipHeight - tipOffset;
                    offset.left = pos.left - (tipWidth / 2) + (elWidth / 2);
                }

                tip.css('top', offset.top + 'px');
                tip.css('left', offset.left + 'px');
            });

            element.on('mouseout', function() {
                tip.removeClass(tipActiveClassName);
            });

            tip.on('mouseover', function() {
                tip.addClass(tipActiveClassName);
            });

            tip.on('mouseout', function() {
                tip.removeClass(tipActiveClassName);
            });

            element.on('$destroy', function() {
                tip.remove();
            });
        }
    };
}

module.directive('vnTooltip', tooltip);