@carbon/charts 1.8.0 → 1.9.0-rc.1

package/components/essentials/tooltip.js

@@ -1,263 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { Component } from '../component';
-import * as Tools from '../../tools';
-import { DOMUtils } from '../../services';
-import { Events, RenderTypes, TruncationTypes } from '../../interfaces';
-import * as Configuration from '../../configuration';
-// Carbon position service
-import Position, { PLACEMENTS } from '@carbon/utils-position';
-// import the settings for the css prefix
-import { carbonPrefix } from '../../configuration-non-customizable';
-// D3 Imports
-// @ts-ignore
-// ts-ignore is needed because `@types/d3`
-// is missing the `pointer` function
-import { select, pointer } from 'd3-selection';
-import { format } from 'date-fns';
-var Tooltip = /** @class */ (function (_super) {
-    __extends(Tooltip, _super);
-    function Tooltip(model, services, configs) {
-        var _this = _super.call(this, model, services, configs) || this;
-        _this.type = 'tooltip';
-        _this.renderType = RenderTypes.HTML;
-        // flag for checking whether tooltip event listener is added or not
-        _this.isEventListenerAdded = false;
-        _this.positionService = new Position();
-        _this.handleShowTooltip = function (e) {
-            var data = e.detail.data || e.detail.items;
-            var defaultHTML;
-            var formattedItems = _this.formatItems(_this.getItems(e));
-            if (e.detail.content) {
-                defaultHTML = "<div class=\"title-tooltip\"><p>" + e.detail.content + "</p></div>";
-            }
-            else {
-                defaultHTML = _this.getTooltipHTML(formattedItems);
-            }
-            var tooltipTextContainer = DOMUtils.appendOrSelect(_this.tooltip, 'div.content-box');
-            // if there is a provided tooltip HTML function call it
-            if (Tools.getProperty(_this.getOptions(), 'tooltip', 'customHTML')) {
-                if (e.detail.content) {
-                    var labelHTML = "<div class=\"title-tooltip\"><p>" + e.detail.content + "</p></div>";
-                    tooltipTextContainer.html(labelHTML);
-                }
-                else {
-                    tooltipTextContainer.html(_this.model
-                        .getOptions()
-                        .tooltip.customHTML(data, defaultHTML));
-                }
-            }
-            else {
-                // Use default tooltip
-                tooltipTextContainer.html(defaultHTML);
-            }
-            // Apply custom background colors
-            tooltipTextContainer
-                .selectAll('.datapoint-tooltip')
-                .each(function (datum, i) {
-                var item = formattedItems[i];
-                if (formattedItems[i] && formattedItems[i].color) {
-                    select(this)
-                        .select('.tooltip-color')
-                        .attr('class', 'tooltip-color')
-                        .style('background-color', item.color);
-                }
-            });
-            // Position the tooltip
-            _this.positionTooltip(e);
-            // Fade in
-            _this.tooltip.classed('hidden', false).attr('aria-hidden', false);
-        };
-        _this.handleHideTooltip = function () {
-            _this.tooltip.classed('hidden', true).attr('aria-hidden', true);
-        };
-        _this.init();
-        return _this;
-    }
-    Tooltip.prototype.addTooltipEventListener = function () {
-        var _this = this;
-        // listen to move-tooltip Custom Events to move the tooltip
-        this.services.events.addEventListener(Events.Tooltip.MOVE, function (e) {
-            if (_this.tooltip.classed('hidden') === false) {
-                _this.positionTooltip(e);
-            }
-        });
-        // listen to show-tooltip Custom Events to render the tooltip
-        this.services.events.addEventListener(Events.Tooltip.SHOW, this.handleShowTooltip);
-        // listen to hide-tooltip Custom Events to hide the tooltip
-        this.services.events.addEventListener(Events.Tooltip.HIDE, this.handleHideTooltip);
-        // listen to chart-mouseout event to hide the tooltip
-        this.services.events.addEventListener(Events.Chart.MOUSEOUT, this.handleHideTooltip);
-    };
-    Tooltip.prototype.removeTooltipEventListener = function () {
-        // remove move-tooltip Custom Events
-        this.services.events.removeEventListener(Events.Tooltip.MOVE, null);
-        // remove show-tooltip Custom Events
-        this.services.events.removeEventListener(Events.Tooltip.SHOW, this.handleShowTooltip);
-        // remove hide-tooltip Custom Events
-        this.services.events.removeEventListener(Events.Tooltip.HIDE, this.handleHideTooltip);
-        // remove the listener on chart-mouseout
-        this.services.events.removeEventListener(Events.Chart.MOUSEOUT, this.handleHideTooltip);
-    };
-    Tooltip.prototype.getItems = function (e) {
-        if (e.detail.items) {
-            return e.detail.items;
-        }
-        return [];
-    };
-    Tooltip.prototype.formatItems = function (items) {
-        var _this = this;
-        var options = this.getOptions();
-        // get user provided custom values for truncation
-        var truncationType = Tools.getProperty(options, 'tooltip', 'truncation', 'type');
-        var truncationThreshold = Tools.getProperty(options, 'tooltip', 'truncation', 'threshold');
-        var truncationNumCharacter = Tools.getProperty(options, 'tooltip', 'truncation', 'numCharacter');
-        // truncate the label if it's too long
-        // only applies to discrete type
-        if (truncationType !== TruncationTypes.NONE) {
-            return items.map(function (item) {
-                // get width of the label icon if it exists
-                var labelIconSize = item.labelIcon ? 12 : 0;
-                item.value = item.value
-                    ? _this.valueFormatter(item.value, item.label)
-                    : item.value;
-                if (item.label &&
-                    item.label.length + labelIconSize > truncationThreshold) {
-                    item.label = Tools.truncateLabel(item.label, truncationType, truncationNumCharacter);
-                }
-                if (item.value && item.value.length > truncationThreshold) {
-                    item.value = Tools.truncateLabel(item.value, truncationType, truncationNumCharacter);
-                }
-                return item;
-            });
-        }
-        return items;
-    };
-    Tooltip.prototype.getTooltipHTML = function (formattedItems) {
-        return ("<ul class=\"multi-tooltip\">" +
-            formattedItems
-                .map(function (item) {
-                return "<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip" + (item.bold ? ' bold' : '') + "\">\n\t\t\t\t\t\t" + (item.class || item.color
-                    ? "<div class=\"tooltip-color " + item.class + "\"></div>"
-                    : '') + "\n\t\t\t\t\t\t<div class=\"label\">\n\t\t\t\t\t\t<p>" + (item.label || '') + "</p>\n\t\t\t\t\t\t" + (item.labelIcon ? "<span class=\"label-icon\"/>" + item.labelIcon + "</span>" : '') + "\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t" + (item.value === undefined || item.value === null
-                    ? ''
-                    : "<p class=\"value\"/>" + item.value + "</p>") + "\n\t\t\t\t\t</div>\n\t\t\t\t</li>";
-            })
-                .join('') +
-            "</ul>");
-    };
-    Tooltip.prototype.valueFormatter = function (value, label) {
-        var options = this.getOptions();
-        var valueFormatter = Tools.getProperty(options, 'tooltip', 'valueFormatter');
-        if (valueFormatter) {
-            return valueFormatter(value, label);
-        }
-        if (typeof value.getTime === 'function') {
-            return format(value, 'MMM d, yyyy');
-        }
-        try {
-            // it's a correct ISO format Date string
-            if (typeof value === 'string' &&
-                /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(value)) {
-                return format(Date.parse(value), 'MMM d, yyyy');
-            }
-        }
-        catch (e) {
-            // not a valid ISO format string
-        }
-        return value.toLocaleString();
-    };
-    Tooltip.prototype.render = function () {
-        var options = this.getOptions();
-        var isTooltipEnabled = Tools.getProperty(options, 'tooltip', 'enabled');
-        if (isTooltipEnabled) {
-            // Grab the tooltip element
-            var holder = select(this.services.domUtils.getHolder());
-            var chartprefix = Tools.getProperty(options, 'style', 'prefix');
-            this.tooltip = DOMUtils.appendOrSelect(holder, "div." + carbonPrefix + "--" + chartprefix + "--tooltip");
-            this.tooltip.style('max-width', null).attr('role', 'tooltip');
-            if (!this.isEventListenerAdded) {
-                this.addTooltipEventListener();
-                this.isEventListenerAdded = true;
-            }
-            this.tooltip.classed('hidden', true);
-        }
-        else if (!isTooltipEnabled && this.isEventListenerAdded) {
-            // remove tooltip eventListener
-            this.removeTooltipEventListener();
-            this.isEventListenerAdded = false;
-        }
-    };
-    Tooltip.prototype.positionTooltip = function (e) {
-        var holder = this.services.domUtils.getHolder();
-        var target = this.tooltip.node();
-        var options = this.getOptions();
-        var isTopZoomBarEnabled = Tools.getProperty(options, 'zoomBar', 'top', 'enabled');
-        var mouseRelativePos = Tools.getProperty(e, 'detail', 'mousePosition');
-        if (!mouseRelativePos) {
-            mouseRelativePos = pointer(Tools.getProperty(e, 'detail', 'event'), holder);
-        }
-        else {
-            var zoombarType = Tools.getProperty(options, 'zoomBar', 'top', 'type');
-            var zoombarHeight = Configuration.zoomBar.height[zoombarType];
-            // if the mouse position is from event (ruler)
-            // we need add zoom bar height
-            if (isTopZoomBarEnabled) {
-                mouseRelativePos[1] +=
-                    zoombarHeight + Configuration.zoomBar.spacerHeight;
-                // TODO - we need to add toolbar height when toolbar is available
-            }
-        }
-        var pos;
-        var holderWidth = holder.offsetWidth;
-        var holderHeight = holder.offsetHeight;
-        var bestPlacementOption;
-        if (mouseRelativePos[0] / holderWidth > 0.9) {
-            bestPlacementOption = PLACEMENTS.LEFT;
-        }
-        else if (mouseRelativePos[0] / holderWidth < 0.1) {
-            bestPlacementOption = PLACEMENTS.RIGHT;
-        }
-        else {
-            // Find out whether tooltip should be shown on the left or right side
-            bestPlacementOption = this.positionService.findBestPlacementAt({
-                left: mouseRelativePos[0],
-                top: mouseRelativePos[1],
-            }, target, [
-                PLACEMENTS.RIGHT,
-                PLACEMENTS.LEFT,
-                PLACEMENTS.TOP,
-                PLACEMENTS.BOTTOM,
-            ], function () { return ({
-                top: undefined,
-                left: undefined,
-                width: holderWidth,
-                height: holderHeight,
-            }); });
-        }
-        var horizontalOffset = Configuration.tooltips.horizontalOffset;
-        if (bestPlacementOption === PLACEMENTS.LEFT) {
-            horizontalOffset *= -1;
-        }
-        // Get coordinates to where tooltip should be positioned
-        pos = this.positionService.findPositionAt({
-            left: mouseRelativePos[0] + horizontalOffset,
-            top: mouseRelativePos[1],
-        }, target, bestPlacementOption);
-        this.positionService.setElement(target, pos);
-    };
-    return Tooltip;
-}(Component));
-export { Tooltip };
-//# sourceMappingURL=../../../src/components/essentials/tooltip.js.map

package/components/essentials/tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component } from '../component';\nimport * as Tools from '../../tools';\nimport { DOMUtils } from '../../services';\nimport { ChartModel } from '../../model/model';\nimport { Events, RenderTypes, TruncationTypes } from '../../interfaces';\nimport * as Configuration from '../../configuration';\n\n// Carbon position service\nimport Position, { PLACEMENTS } from '@carbon/utils-position';\n\n// import the settings for the css prefix\nimport { carbonPrefix } from '../../configuration-non-customizable';\n\n// D3 Imports\n// @ts-ignore\n// ts-ignore is needed because `@types/d3`\n// is missing the `pointer` function\nimport { select, pointer } from 'd3-selection';\n\nimport { format } from 'date-fns';\n\nexport class Tooltip extends Component {\n\ttype = 'tooltip';\n\trenderType = RenderTypes.HTML;\n\n\t// flag for checking whether tooltip event listener is added or not\n\tisEventListenerAdded = false;\n\ttooltip: any;\n\tpositionService = new Position();\n\n\tconstructor(model: ChartModel, services: any, configs?: any) {\n\t\tsuper(model, services, configs);\n\n\t\tthis.init();\n\t}\n\n\thandleShowTooltip = (e) => {\n\t\tconst data = e.detail.data || e.detail.items;\n\n\t\tlet defaultHTML;\n\t\tlet formattedItems = this.formatItems(this.getItems(e));\n\n\t\tif (e.detail.content) {\n\t\t\tdefaultHTML = `<div class=\"title-tooltip\"><p>${e.detail.content}</p></div>`;\n\t\t} else {\n\t\t\tdefaultHTML = this.getTooltipHTML(formattedItems);\n\t\t}\n\n\t\tconst tooltipTextContainer = DOMUtils.appendOrSelect(\n\t\t\tthis.tooltip,\n\t\t\t'div.content-box'\n\t\t);\n\n\t\t// if there is a provided tooltip HTML function call it\n\t\tif (Tools.getProperty(this.getOptions(), 'tooltip', 'customHTML')) {\n\t\t\tif (e.detail.content) {\n\t\t\t\tconst labelHTML = `<div class=\"title-tooltip\"><p>${e.detail.content}</p></div>`;\n\t\t\t\ttooltipTextContainer.html(labelHTML);\n\t\t\t} else {\n\t\t\t\ttooltipTextContainer.html(\n\t\t\t\t\tthis.model\n\t\t\t\t\t\t.getOptions()\n\t\t\t\t\t\t.tooltip.customHTML(data, defaultHTML)\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\t// Use default tooltip\n\t\t\ttooltipTextContainer.html(defaultHTML);\n\t\t}\n\n\t\t// Apply custom background colors\n\t\ttooltipTextContainer\n\t\t\t.selectAll('.datapoint-tooltip')\n\t\t\t.each(function (datum, i) {\n\t\t\t\tconst item = formattedItems[i];\n\n\t\t\t\tif (formattedItems[i] && formattedItems[i].color) {\n\t\t\t\t\tselect(this)\n\t\t\t\t\t\t.select('.tooltip-color')\n\t\t\t\t\t\t.attr('class', 'tooltip-color')\n\t\t\t\t\t\t.style('background-color', item.color);\n\t\t\t\t}\n\t\t\t});\n\n\t\t// Position the tooltip\n\t\tthis.positionTooltip(e);\n\n\t\t// Fade in\n\t\tthis.tooltip.classed('hidden', false).attr('aria-hidden', false);\n\t};\n\n\thandleHideTooltip = () => {\n\t\tthis.tooltip.classed('hidden', true).attr('aria-hidden', true);\n\t};\n\n\taddTooltipEventListener() {\n\t\t// listen to move-tooltip Custom Events to move the tooltip\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.Tooltip.MOVE,\n\t\t\t(e: CustomEvent) => {\n\t\t\t\tif (this.tooltip.classed('hidden') === false) {\n\t\t\t\t\tthis.positionTooltip(e);\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\n\t\t// listen to show-tooltip Custom Events to render the tooltip\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.Tooltip.SHOW,\n\t\t\tthis.handleShowTooltip\n\t\t);\n\n\t\t// listen to hide-tooltip Custom Events to hide the tooltip\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.Tooltip.HIDE,\n\t\t\tthis.handleHideTooltip\n\t\t);\n\n\t\t// listen to chart-mouseout event to hide the tooltip\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.Chart.MOUSEOUT,\n\t\t\tthis.handleHideTooltip\n\t\t);\n\t}\n\n\tremoveTooltipEventListener() {\n\t\t// remove move-tooltip Custom Events\n\t\tthis.services.events.removeEventListener(Events.Tooltip.MOVE, null);\n\n\t\t// remove show-tooltip Custom Events\n\t\tthis.services.events.removeEventListener(\n\t\t\tEvents.Tooltip.SHOW,\n\t\t\tthis.handleShowTooltip\n\t\t);\n\n\t\t// remove hide-tooltip Custom Events\n\t\tthis.services.events.removeEventListener(\n\t\t\tEvents.Tooltip.HIDE,\n\t\t\tthis.handleHideTooltip\n\t\t);\n\n\t\t// remove the listener on chart-mouseout\n\t\tthis.services.events.removeEventListener(\n\t\t\tEvents.Chart.MOUSEOUT,\n\t\t\tthis.handleHideTooltip\n\t\t);\n\t}\n\n\tgetItems(e: CustomEvent) {\n\t\tif (e.detail.items) {\n\t\t\treturn e.detail.items;\n\t\t}\n\n\t\treturn [];\n\t}\n\n\tformatItems(items) {\n\t\tconst options = this.getOptions();\n\n\t\t// get user provided custom values for truncation\n\t\tconst truncationType = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'tooltip',\n\t\t\t'truncation',\n\t\t\t'type'\n\t\t);\n\n\t\tconst truncationThreshold = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'tooltip',\n\t\t\t'truncation',\n\t\t\t'threshold'\n\t\t);\n\n\t\tconst truncationNumCharacter = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'tooltip',\n\t\t\t'truncation',\n\t\t\t'numCharacter'\n\t\t);\n\n\t\t// truncate the label if it's too long\n\t\t// only applies to discrete type\n\t\tif (truncationType !== TruncationTypes.NONE) {\n\t\t\treturn items.map((item) => {\n\t\t\t\t// get width of the label icon if it exists\n\t\t\t\tconst labelIconSize = item.labelIcon ? 12 : 0;\n\n\t\t\t\titem.value = item.value\n\t\t\t\t\t? this.valueFormatter(item.value, item.label)\n\t\t\t\t\t: item.value;\n\t\t\t\tif (\n\t\t\t\t\titem.label &&\n\t\t\t\t\titem.label.length + labelIconSize > truncationThreshold\n\t\t\t\t) {\n\t\t\t\t\titem.label = Tools.truncateLabel(\n\t\t\t\t\t\titem.label,\n\t\t\t\t\t\ttruncationType,\n\t\t\t\t\t\ttruncationNumCharacter\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif (item.value && item.value.length > truncationThreshold) {\n\t\t\t\t\titem.value = Tools.truncateLabel(\n\t\t\t\t\t\titem.value,\n\t\t\t\t\t\ttruncationType,\n\t\t\t\t\t\ttruncationNumCharacter\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\treturn item;\n\t\t\t});\n\t\t}\n\n\t\treturn items;\n\t}\n\n\tgetTooltipHTML(formattedItems: any) {\n\t\treturn (\n\t\t\t`<ul class=\"multi-tooltip\">` +\n\t\t\tformattedItems\n\t\t\t\t.map(\n\t\t\t\t\t(item) =>\n\t\t\t\t\t\t`<li>\n\t\t\t\t\t<div class=\"datapoint-tooltip${item.bold ? ' bold' : ''}\">\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\titem.class || item.color\n\t\t\t\t\t\t\t\t? `<div class=\"tooltip-color ${item.class}\"></div>`\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\t<div class=\"label\">\n\t\t\t\t\t\t<p>${item.label || ''}</p>\n\t\t\t\t\t\t${item.labelIcon ? `<span class=\"label-icon\"/>${item.labelIcon}</span>` : ''}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t${\n\t\t\t\t\t\t\titem.value === undefined || item.value === null\n\t\t\t\t\t\t\t\t? ''\n\t\t\t\t\t\t\t\t: `<p class=\"value\"/>${item.value}</p>`\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t</li>`\n\t\t\t\t)\n\t\t\t\t.join('') +\n\t\t\t`</ul>`\n\t\t);\n\t}\n\n\tvalueFormatter(value: any, label: string) {\n\t\tconst options = this.getOptions();\n\t\tconst valueFormatter = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'tooltip',\n\t\t\t'valueFormatter'\n\t\t);\n\n\t\tif (valueFormatter) {\n\t\t\treturn valueFormatter(value, label);\n\t\t}\n\n\t\tif (typeof value.getTime === 'function') {\n\t\t\treturn format(value, 'MMM d, yyyy');\n\t\t}\n\n\t\ttry {\n\t\t\t// it's a correct ISO format Date string\n\t\t\tif (\n\t\t\t\ttypeof value === 'string' &&\n\t\t\t\t/\\d{4}-\\d{2}-\\d{2}T\\d{2}:\\d{2}:\\d{2}.\\d{3}Z/.test(value)\n\t\t\t) {\n\t\t\t\treturn format(Date.parse(value), 'MMM d, yyyy');\n\t\t\t}\n\t\t} catch (e) {\n\t\t\t// not a valid ISO format string\n\t\t}\n\n\t\treturn value.toLocaleString();\n\t}\n\n\trender() {\n\t\tconst options = this.getOptions();\n\t\tconst isTooltipEnabled = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'tooltip',\n\t\t\t'enabled'\n\t\t);\n\t\tif (isTooltipEnabled) {\n\t\t\t// Grab the tooltip element\n\t\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\t\tconst chartprefix = Tools.getProperty(options, 'style', 'prefix');\n\t\t\tthis.tooltip = DOMUtils.appendOrSelect(\n\t\t\t\tholder,\n\t\t\t\t`div.${carbonPrefix}--${chartprefix}--tooltip`\n\t\t\t);\n\n\t\t\tthis.tooltip.style('max-width', null).attr('role', 'tooltip');\n\n\t\t\tif (!this.isEventListenerAdded) {\n\t\t\t\tthis.addTooltipEventListener();\n\t\t\t\tthis.isEventListenerAdded = true;\n\t\t\t}\n\t\t\tthis.tooltip.classed('hidden', true);\n\t\t} else if (!isTooltipEnabled && this.isEventListenerAdded) {\n\t\t\t// remove tooltip eventListener\n\t\t\tthis.removeTooltipEventListener();\n\t\t\tthis.isEventListenerAdded = false;\n\t\t}\n\t}\n\n\tpositionTooltip(e: CustomEvent) {\n\t\tconst holder = this.services.domUtils.getHolder();\n\t\tconst target = this.tooltip.node();\n\t\tconst options = this.getOptions();\n\t\tconst isTopZoomBarEnabled = Tools.getProperty(\n\t\t\toptions,\n\t\t\t'zoomBar',\n\t\t\t'top',\n\t\t\t'enabled'\n\t\t);\n\n\t\tlet mouseRelativePos = Tools.getProperty(e, 'detail', 'mousePosition');\n\t\tif (!mouseRelativePos) {\n\t\t\tmouseRelativePos = pointer(\n\t\t\t\tTools.getProperty(e, 'detail', 'event'),\n\t\t\t\tholder\n\t\t\t);\n\t\t} else {\n\t\t\tconst zoombarType = Tools.getProperty(\n\t\t\t\toptions,\n\t\t\t\t'zoomBar',\n\t\t\t\t'top',\n\t\t\t\t'type'\n\t\t\t);\n\t\t\tconst zoombarHeight = Configuration.zoomBar.height[zoombarType];\n\n\t\t\t// if the mouse position is from event (ruler)\n\t\t\t// we need add zoom bar height\n\t\t\tif (isTopZoomBarEnabled) {\n\t\t\t\tmouseRelativePos[1] +=\n\t\t\t\t\tzoombarHeight + Configuration.zoomBar.spacerHeight;\n\n\t\t\t\t// TODO - we need to add toolbar height when toolbar is available\n\t\t\t}\n\t\t}\n\n\t\tlet pos;\n\n\t\tconst holderWidth = holder.offsetWidth;\n\t\tconst holderHeight = holder.offsetHeight;\n\n\t\tlet bestPlacementOption;\n\t\tif (mouseRelativePos[0] / holderWidth > 0.9) {\n\t\t\tbestPlacementOption = PLACEMENTS.LEFT;\n\t\t} else if (mouseRelativePos[0] / holderWidth < 0.1) {\n\t\t\tbestPlacementOption = PLACEMENTS.RIGHT;\n\t\t} else {\n\t\t\t// Find out whether tooltip should be shown on the left or right side\n\t\t\tbestPlacementOption = this.positionService.findBestPlacementAt(\n\t\t\t\t{\n\t\t\t\t\tleft: mouseRelativePos[0],\n\t\t\t\t\ttop: mouseRelativePos[1],\n\t\t\t\t},\n\t\t\t\ttarget,\n\t\t\t\t[\n\t\t\t\t\tPLACEMENTS.RIGHT,\n\t\t\t\t\tPLACEMENTS.LEFT,\n\t\t\t\t\tPLACEMENTS.TOP,\n\t\t\t\t\tPLACEMENTS.BOTTOM,\n\t\t\t\t],\n\t\t\t\t() => ({\n\t\t\t\t\ttop: undefined, // properties were never set to optional\n\t\t\t\t\tleft: undefined, // ditto\n\t\t\t\t\twidth: holderWidth,\n\t\t\t\t\theight: holderHeight,\n\t\t\t\t})\n\t\t\t);\n\t\t}\n\n\t\tlet { horizontalOffset } = Configuration.tooltips;\n\t\tif (bestPlacementOption === PLACEMENTS.LEFT) {\n\t\t\thorizontalOffset *= -1;\n\t\t}\n\n\t\t// Get coordinates to where tooltip should be positioned\n\t\tpos = this.positionService.findPositionAt(\n\t\t\t{\n\t\t\t\tleft: mouseRelativePos[0] + horizontalOffset,\n\t\t\t\ttop: mouseRelativePos[1],\n\t\t\t},\n\t\t\ttarget,\n\t\t\tbestPlacementOption\n\t\t);\n\n\t\tthis.positionService.setElement(target, pos);\n\t}\n}\n"]}