@progress/kendo-react-tooltip - npm Package Compare versions

Comparing version 2.7.0-dev.201902221818 to 2.7.0-dev.201902260733

dist/cdn/js/kendo-react-tooltip.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("prop-types"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","react-dom"],e):"object"==typeof exports?exports.KendoReactTooltip=e(require("prop-types"),require("react"),require("react-dom")):t.KendoReactTooltip=e(t.PropTypes,t.React,t.ReactDOM)}(window,function(t,e,o){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=t,o.c=e,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)o.d(n,r,function(e){return t[e]}.bind(null,r));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=2)}([function(e,o){e.exports=t},function(t,o){t.exports=e},function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=o(3);e.Tooltip=n.Tooltip},function(t,e,o){"use strict";var n,r=this&&this.__extends||(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])},function(t,e){function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}),i=this&&this.__assign||Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var r in e=arguments[o])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},l=this&&this.__rest||function(t,e){var o={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(t);r<n.length;r++)e.indexOf(n[r])<0&&(o[n[r]]=t[n[r]])}return o};Object.defineProperty(e,"__esModule",{value:!0});var s=o(1),a=o(4),u=o(0),c=o(6),p=o(5),f=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={renderTooltipItem:!1,targetElement:null},e.title="",e.top=0,e.left=0,e.handleMouseLeave=function(t){var o=t.target;p.isTooltipElement(o&&o.className)||e.hideToolTip(t)},e.handleMouseOver=function(t){var o=t.target;p.isTooltipElement(o)||e.openedElement===o||(""!==o.title?e.isVisible(o)&&(e.state.renderTooltipItem&&c.dispatchEvent(e.props.onClose,t,e,void 0),e.showToolTip(t)):e.hideToolTip(t))},e.handleOnOpenEvent=function(t){void 0!==e.targetElement.title&&c.dispatchEvent(e.props.onOpen,t,e,void 0)},e.handleBodyMousemove=function(t){e.top=t.clientY,e.left=t.clientX,document&&(e.targetElement=t.target||document.body)},e.position=function(t){var o=p.getDomRect(e.targetElement);return{left:p.getLeftPosition(e.left,t.offsetWidth,o,e.props.anchorElement,e.props.position),top:p.getTopPosition(e.top,o,t.offsetHeight,e.props.anchorElement,e.props.position)}},e.calloutClassName=function(){switch(e.props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return e.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},e}return r(e,t),e.prototype.componentDidMount=function(){document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)},e.prototype.componentWillUnmount=function(){clearTimeout(this.openTimeout),this.openTimeout=void 0,document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove)},e.prototype.render=function(){var t=this;if(this.props.children){var o=this.props,n=o.children,r=l(o,["children"]),u=null;return s.createElement("div",{onMouseOver:function(t){u&&u.handleMouseOver(t)},onMouseLeave:function(t){u&&u.handleMouseLeave(t)}},s.createElement(e,i({ref:function(t){return u=t}},r)),n)}return void 0!==this.targetElement&&this.targetElement.hasAttribute("title")&&document&&this.state.renderTooltipItem&&a.createPortal(s.createElement("div",{ref:function(e){if(e){var o=t.position(e);e.style.left=o.left+"px",e.style.top=o.top+"px"}},className:"k-animation-container k-animation-container-fixed k-animation-container-shown",tabIndex:0},s.createElement("div",{className:"k-tooltip",style:{position:"relative"}},s.createElement("div",{className:"k-tooltip-content"},t.props.content&&s.createElement(t.props.content,{title:t.title,target:t.state.targetElement})||t.title),t.props.showCallout&&s.createElement("div",{ref:function(e){e&&(e.className=t.calloutClassName(),"auto"===t.props.position&&(t.left<window.screen.availWidth/2?e.style.left="25%":e.style.left="75%"))}}))),document.body)},e.prototype.showToolTip=function(t){var e=this;this.openedElement&&this.openedElement.setAttribute("title",this.title);var o=this.openedElement=t.target;if(this.title=o.title,o.setAttribute("title",""),clearTimeout(this.openTimeout),!this.props.openDelay)return this.setState({renderTooltipItem:!0,targetElement:o}),void this.handleOnOpenEvent(t);t.persist(),this.openTimeout=setTimeout(function(){e.setState({renderTooltipItem:!0,targetElement:e.targetElement}),e.targetElement.hasAttribute("title")&&e.handleOnOpenEvent(t)},this.props.openDelay)},e.prototype.hideToolTip=function(t){this.openedElement&&this.openedElement.setAttribute("title",this.title),this.openedElement&&this.state.renderTooltipItem&&(this.setState({renderTooltipItem:!1}),c.dispatchEvent(this.props.onClose,t,this,void 0)),this.openedElement=null},e.prototype.isVisible=function(t){return!this.props.filter||this.props.filter(t)},e.propTypes={anchorElement:u.oneOf(["pointer","target"]),content:u.func,filter:u.func,openDelay:u.number,position:u.oneOf(["right","left","top","bottom","auto"])},e.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0},e}(s.Component);e.Tooltip=f},function(t,e){t.exports=o},function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.getLeftPosition=function(t,e,o,n,r){switch(r){case"bottom":return"pointer"===n?t-e/2:o.left-e/2+o.width/2;case"left":return"pointer"===n?t-e-10:o.left-e-10;case"right":return"pointer"===n?t+10:o.right+10;case"top":return"pointer"===n?t-e/2:o.left-e/2+o.width/2;default:return"pointer"===n?t<window.screen.availWidth/2?t-10:t-e+10:t<window.screen.availWidth/2?o.left:o.right-e}},e.getTopPosition=function(t,e,o,n,r){switch(r){case"bottom":return"pointer"===n?t+10:e.bottom+10;case"left":case"right":return"pointer"===n?t-o/2:e.top-o/2+e.height/2;case"top":return"pointer"===n?t-o-10:e.top-o-10;default:return"pointer"===n?t<window.innerHeight/2?t+10:t-o-10:t<window.innerHeight/2?e.bottom+10:e.top-o-10}},e.getDomRect=function(t){return null!==t?t.getBoundingClientRect():document.body.getBoundingClientRect()},e.toolTipSelectors=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],e.isTooltipElement=function(t){for(var o=t.parentNode;o;){if("k-tooltip"===o.className)return!0;o=o.parentNode}return e.toolTipSelectors.filter(function(e){return e===t.className}).length>0}},function(t,e,o){"use strict";o.r(e);var n,r=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(function(t){return!0!==t&&!!t}).map(function(t){return Array.isArray(t)?r.apply(void 0,t):"object"==typeof t?Object.keys(t).map(function(e,o){return t[o]||t[e]&&e||null}).filter(function(t){return null!==t}).join(" "):t}).filter(function(t){return!!t}).join(" ")},i=function(){var t,e,o="";for(t=0;t<32;t++)e=16*Math.random()|0,8!==t&&12!==t&&16!==t&&20!==t||(o+="-"),o+=(12===t?4:16===t?3&e|8:e).toString(16);return o},l={backspace:8,tab:9,enter:13,shift:16,esc:27,space:32,pageUp:33,pageDown:34,end:35,home:36,left:37,up:38,right:39,down:40,delete:46},s=function(){},a=function(){return function(){}}(),u=o(1),c=o(0),p=(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])},function(t,e){function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}),f=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={focused:!1},e.handleFocus=function(t){e.setState({focused:!0})},e.handleBlur=function(t){e.setState({focused:!1})},e}return p(e,t),e.prototype.render=function(){var t=this.props,e=t.label,o=t.id,n=t.className,i=t.value,l=t.placeholder,s=t.valid,a=t.style,c=r({"k-textbox-container":!0,"k-state-focused":this.state.focused,"k-state-empty":!(i||l),"k-state-invalid":!s&&void 0!==s},n);return u.createElement("span",{className:c,onFocus:this.handleFocus,onBlur:this.handleBlur,style:a},this.props.children,e?o?u.createElement("label",{htmlFor:o,className:"k-label"},e):u.createElement("span",{className:"k-label"},e):null)},e.propTypes={label:c.string,id:c.string,value:c.string,placeholder:c.string,valid:c.bool},e}(u.Component);function d(t,e,o,n){if(t){var r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:o};t.call(void 0,Object.assign(r,n))}}var h=function(){return"undefined"==typeof window};o.d(e,"classNames",function(){return r}),o.d(e,"guid",function(){return i}),o.d(e,"Keys",function(){return l}),o.d(e,"noop",function(){return s}),o.d(e,"FloatingLabel",function(){return f}),o.d(e,"FormComponent",function(){return a}),o.d(e,"dispatchEvent",function(){return d}),o.d(e,"isServerRendering",function(){return h})}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("prop-types"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","react-dom"],e):"object"==typeof exports?exports.KendoReactTooltip=e(require("prop-types"),require("react"),require("react-dom")):t.KendoReactTooltip=e(t.PropTypes,t.React,t.ReactDOM)}(window,function(t,e,n){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=2)}([function(e,n){e.exports=t},function(t,n){t.exports=e},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var o=n(3);e.Tooltip=o.Tooltip},function(t,e,n){"use strict";var o,r=this&&this.__extends||(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])},function(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),i=this&&this.__assign||Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},l=this&&this.__rest||function(t,e){var n={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(n[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(t);r<o.length;r++)e.indexOf(o[r])<0&&(n[o[r]]=t[o[r]])}return n};Object.defineProperty(e,"__esModule",{value:!0});var u=n(1),a=n(4),s=n(0),c=n(6),p=n(5),f=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={targetElement:null,open:!1},e.title="",e.top=0,e.left=0,e.handleMouseOut=function(t){var n=document.elementFromPoint(t.clientX,t.clientY);p.isTooltipElement(n)||(c.dispatchEvent(e.props.onClose,t,e,void 0),e.setState({targetElement:null,open:!1}))},e.handleMouseOver=function(t){var n=t.target;e.isVisible(n)&&!p.isTooltipElement(n)&&n!==e.state.targetElement&&(e.showToolTip(t),c.dispatchEvent(e.props.onOpen,t,e,void 0))},e.handleBodyMousemove=function(t){e.top=t.clientY,e.left=t.clientX},e.position=function(t){var n=p.getDomRect(e.state.targetElement);return{left:p.getLeftPosition(e.left,t.offsetWidth,n,e.props.anchorElement,e.props.position),top:p.getTopPosition(e.top,n,t.offsetHeight,e.props.anchorElement,e.props.position)}},e.getTitle=function(t){for(;t;){if(t.title||t.titleExpando)return t.title||t.titleExpando;t=e.props.parentTitle&&t.parentElement||null}return""},e.calloutClassName=function(){switch(e.props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return e.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},e}return r(e,t),e.prototype.componentDidMount=function(){document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)},e.prototype.componentWillUnmount=function(){clearTimeout(this.openTimeout),this.openTimeout=void 0,document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove)},e.prototype.render=function(){var t=this;if(this.props.children){var n=this.props,o=n.children,r=l(n,["children"]),s=null;return u.createElement("div",{onMouseOver:function(t){s&&s.handleMouseOver(t)},onMouseOut:function(t){s&&s.handleMouseOut(t)}},u.createElement(e,i({ref:function(t){return s=t}},r)),o)}return this.state.targetElement&&this.title&&document&&a.createPortal(u.createElement("div",{ref:function(e){if(e){var n=t.position(e);e.style.left=n.left+"px",e.style.top=n.top+"px"}},className:"k-animation-container k-animation-container-fixed k-animation-container-shown",tabIndex:0},u.createElement("div",{className:"k-tooltip",style:{position:"relative"}},u.createElement("div",{className:"k-tooltip-content"},this.props.content&&u.createElement(this.props.content,{title:this.title,target:this.state.targetElement})||this.title),this.props.showCallout&&u.createElement("div",{ref:function(e){e&&(e.className=t.calloutClassName(),"auto"===t.props.position&&(t.left<window.screen.availWidth/2?e.style.left="25%":e.style.left="75%"))}}))),document.body)},e.prototype.showToolTip=function(t){var e=this,n=t.target;clearTimeout(this.openTimeout),this.title=this.getTitle(t.target),this.title&&(n.titleExpando=n.titleExpando||n.title,n.title=""),this.props.openDelay?this.openTimeout=setTimeout(function(){e.setState({targetElement:n,open:!0})},this.props.openDelay):this.setState({targetElement:n,open:!0})},e.prototype.isVisible=function(t){return!this.props.filter||this.props.filter(t)},e.propTypes={anchorElement:s.oneOf(["pointer","target"]),content:s.func,filter:s.func,openDelay:s.number,position:s.oneOf(["right","left","top","bottom","auto"])},e.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},e}(u.PureComponent);e.Tooltip=f},function(t,e){t.exports=n},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.getLeftPosition=function(t,e,n,o,r){switch(r){case"bottom":return"pointer"===o?t-e/2:n.left-e/2+n.width/2;case"left":return"pointer"===o?t-e-10:n.left-e-10;case"right":return"pointer"===o?t+10:n.right+10;case"top":return"pointer"===o?t-e/2:n.left-e/2+n.width/2;default:return"pointer"===o?t<window.screen.availWidth/2?t-10:t-e+10:t<window.screen.availWidth/2?n.left:n.right-e}},e.getTopPosition=function(t,e,n,o,r){switch(r){case"bottom":return"pointer"===o?t+10:e.bottom+10;case"left":case"right":return"pointer"===o?t-n/2:e.top-n/2+e.height/2;case"top":return"pointer"===o?t-n-10:e.top-n-10;default:return"pointer"===o?t<window.innerHeight/2?t+10:t-n-10:t<window.innerHeight/2?e.bottom+10:e.top-n-10}},e.getDomRect=function(t){return null!==t?t.getBoundingClientRect():document.body.getBoundingClientRect()},e.toolTipSelectors=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],e.isTooltipElement=function(t){if(null===t)return!1;for(var n=t;n;){if(null!==n&&"k-tooltip"===n.className)return!0;n=null!==n.parentNode&&n.parentNode}return e.toolTipSelectors.filter(function(e){return e===t.className}).length>0}},function(t,e,n){"use strict";n.r(e);var o,r=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(function(t){return!0!==t&&!!t}).map(function(t){return Array.isArray(t)?r.apply(void 0,t):"object"==typeof t?Object.keys(t).map(function(e,n){return t[n]||t[e]&&e||null}).filter(function(t){return null!==t}).join(" "):t}).filter(function(t){return!!t}).join(" ")},i=function(){var t,e,n="";for(t=0;t<32;t++)e=16*Math.random()|0,8!==t&&12!==t&&16!==t&&20!==t||(n+="-"),n+=(12===t?4:16===t?3&e|8:e).toString(16);return n},l={backspace:8,tab:9,enter:13,shift:16,esc:27,space:32,pageUp:33,pageDown:34,end:35,home:36,left:37,up:38,right:39,down:40,delete:46},u=function(){},a=function(){return function(){}}(),s=n(1),c=n(0),p=(o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])},function(t,e){function n(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}),f=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={focused:!1},e.handleFocus=function(t){e.setState({focused:!0})},e.handleBlur=function(t){e.setState({focused:!1})},e}return p(e,t),e.prototype.render=function(){var t=this.props,e=t.label,n=t.id,o=t.className,i=t.value,l=t.placeholder,u=t.valid,a=t.style,c=r({"k-textbox-container":!0,"k-state-focused":this.state.focused,"k-state-empty":!(i||l),"k-state-invalid":!u&&void 0!==u},o);return s.createElement("span",{className:c,onFocus:this.handleFocus,onBlur:this.handleBlur,style:a},this.props.children,e?n?s.createElement("label",{htmlFor:n,className:"k-label"},e):s.createElement("span",{className:"k-label"},e):null)},e.propTypes={label:c.string,id:c.string,value:c.string,placeholder:c.string,valid:c.bool},e}(s.Component);function d(t,e,n,o){if(t){var r={syntheticEvent:e,nativeEvent:e.nativeEvent,target:n};t.call(void 0,Object.assign(r,o))}}var h=function(){return"undefined"==typeof window};n.d(e,"classNames",function(){return r}),n.d(e,"guid",function(){return i}),n.d(e,"Keys",function(){return l}),n.d(e,"noop",function(){return u}),n.d(e,"FloatingLabel",function(){return f}),n.d(e,"FormComponent",function(){return a}),n.d(e,"dispatchEvent",function(){return d}),n.d(e,"isServerRendering",function(){return h})}])});

dist/es/Tooltip.d.ts

@@ -8,6 +8,6 @@ import * as React from 'react';
 interface TooltipState {
-    renderTooltipItem: boolean;
     targetElement: HTMLElement | null;
+    open: boolean;
 }
-export declare class Tooltip extends React.Component<TooltipProps, TooltipState> {
+export declare class Tooltip extends React.PureComponent<TooltipProps, TooltipState> {
     /**
@@ -28,2 +28,3 @@ * @hidden
         showCallout: boolean;
+        parentTitle: boolean;
     };
@@ -35,6 +36,4 @@ /**
     private title;
-    private openedElement;
     private top;
     private left;
-    private targetElement;
     private openTimeout;
@@ -49,3 +48,9 @@ /**
     componentWillUnmount(): void;
-    handleMouseLeave: (event: any) => void;
+    /**
+     * The method is used on the MouseOut event to hide the Tooltip.
+     */
+    handleMouseOut: (event: any) => void;
+    /**
+     * The method is used on the MouseOver event to show the Tooltip.
+     */
     handleMouseOver: (event: any) => void;
@@ -56,10 +61,9 @@ /**
     render(): any;
+    private handleBodyMousemove;
     private showToolTip;
-    private hideToolTip;
     private isVisible;
-    private handleOnOpenEvent;
-    private handleBodyMousemove;
     private position;
+    private getTitle;
     private calloutClassName;
 }
 export {};

dist/es/Tooltip.js

@@ -41,4 +41,4 @@ var __extends = (this && this.__extends) || (function () {
         _this.state = {
-            renderTooltipItem: false,
-            targetElement: null
+            targetElement: null,
+            open: false
         };
@@ -48,40 +48,30 @@ _this.title = '';
         _this.left = 0;
-        _this.handleMouseLeave = function (event) {
-            var target = event.target;
-            if (isTooltipElement(target && target.className)) {
+        /**
+         * The method is used on the MouseOut event to hide the Tooltip.
+         */
+        _this.handleMouseOut = function (event) {
+            var element = document.elementFromPoint(event.clientX, event.clientY);
+            if (isTooltipElement(element)) {
                 return;
             }
-            _this.hideToolTip(event);
+            dispatchEvent(_this.props.onClose, event, _this, undefined);
+            _this.setState({ targetElement: null, open: false });
         };
+        /**
+         * The method is used on the MouseOver event to show the Tooltip.
+         */
         _this.handleMouseOver = function (event) {
             var target = event.target;
-            if (isTooltipElement(target) || _this.openedElement === target) {
+            if (!_this.isVisible(target) || isTooltipElement(target) || target === _this.state.targetElement) {
                 return;
             }
-            if (target.title === '') {
-                _this.hideToolTip(event);
-                return;
-            }
-            if (!_this.isVisible(target)) {
-                return;
-            }
-            if (_this.state.renderTooltipItem) {
-                dispatchEvent(_this.props.onClose, event, _this, undefined);
-            }
             _this.showToolTip(event);
+            dispatchEvent(_this.props.onOpen, event, _this, undefined);
         };
-        _this.handleOnOpenEvent = function (event) {
-            if (_this.targetElement.title !== undefined) {
-                dispatchEvent(_this.props.onOpen, event, _this, undefined);
-            }
-        };
         _this.handleBodyMousemove = function (event) {
             _this.top = event.clientY;
             _this.left = event.clientX;
-            if (document) {
-                _this.targetElement = event.target || document.body;
-            }
         };
         _this.position = function (element) {
-            var domRect = getDomRect(_this.targetElement);
+            var domRect = getDomRect(_this.state.targetElement);
             var left = getLeftPosition(_this.left, element.offsetWidth, domRect, _this.props.anchorElement, _this.props.position);
@@ -91,2 +81,11 @@ var top = getTopPosition(_this.top, domRect, element.offsetHeight, _this.props.anchorElement, _this.props.position);
         };
+        _this.getTitle = function (element) {
+            while (element) {
+                if (element.title || element.titleExpando) {
+                    return element.title || element.titleExpando;
+                }
+                element = _this.props.parentTitle && element.parentElement || null;
+            }
+            return '';
+        };
         _this.calloutClassName = function () {
@@ -136,4 +135,4 @@ switch (_this.props.position) {
                     tooltip_1.handleMouseOver(event);
-                } }, onMouseLeave: function (event) { if (tooltip_1) {
-                    tooltip_1.handleMouseLeave(event);
+                } }, onMouseOut: function (event) { if (tooltip_1) {
+                    tooltip_1.handleMouseOut(event);
                 } } },
@@ -143,64 +142,46 @@ React.createElement(Tooltip, __assign({ ref: function (el) { return tooltip_1 = el; } }, options)),
         }
-        var defaultRendering = function () { return (React.createElement("div", { ref: function (el) {
-                if (!el) {
-                    return;
-                }
-                var position = _this.position(el);
-                el.style.left = position.left + 'px';
-                el.style.top = position.top + 'px';
-            }, className: "k-animation-container k-animation-container-fixed k-animation-container-shown", tabIndex: 0 },
-            React.createElement("div", { className: "k-tooltip", style: {
-                    position: 'relative'
-                } },
-                React.createElement("div", { className: "k-tooltip-content" }, _this.props.content &&
-                    React.createElement(_this.props.content, { title: _this.title, target: _this.state.targetElement })
-                    || _this.title),
-                _this.props.showCallout && React.createElement("div", { ref: function (el) {
-                        if (!el) {
-                            return;
-                        }
-                        el.className = _this.calloutClassName();
-                        if (_this.props.position === 'auto') {
-                            _this.left < (window.screen.availWidth / 2)
-                                ? el.style.left = '25%'
-                                : el.style.left = '75%';
-                        }
-                    } })))); };
-        return this.targetElement !== undefined &&
-            this.targetElement.hasAttribute('title') &&
+        return this.state.targetElement &&
+            this.title &&
             document &&
-            this.state.renderTooltipItem &&
-            ReactDOM.createPortal(defaultRendering(), document.body);
+            ReactDOM.createPortal(React.createElement("div", { ref: function (el) {
+                    if (!el) {
+                        return;
+                    }
+                    var position = _this.position(el);
+                    el.style.left = position.left + 'px';
+                    el.style.top = position.top + 'px';
+                }, className: "k-animation-container k-animation-container-fixed k-animation-container-shown", tabIndex: 0 },
+                React.createElement("div", { className: "k-tooltip", style: {
+                        position: 'relative'
+                    } },
+                    React.createElement("div", { className: "k-tooltip-content" }, this.props.content &&
+                        React.createElement(this.props.content, { title: this.title, target: this.state.targetElement })
+                        || this.title),
+                    this.props.showCallout && React.createElement("div", { ref: function (el) {
+                            if (!el) {
+                                return;
+                            }
+                            el.className = _this.calloutClassName();
+                            if (_this.props.position === 'auto') {
+                                _this.left < (window.screen.availWidth / 2)
+                                    ? el.style.left = '25%'
+                                    : el.style.left = '75%';
+                            }
+                        } }))), document.body);
     };
     Tooltip.prototype.showToolTip = function (event) {
         var _this = this;
-        if (this.openedElement) {
-            this.openedElement.setAttribute('title', this.title);
+        var target = event.target;
+        clearTimeout(this.openTimeout);
+        this.title = this.getTitle(event.target);
+        if (this.title) {
+            target.titleExpando = target.titleExpando || target.title;
+            target.title = '';
         }
-        var target = this.openedElement = event.target;
-        this.title = target.title;
-        target.setAttribute('title', '');
-        clearTimeout(this.openTimeout);
         if (!this.props.openDelay) {
-            this.setState({ renderTooltipItem: true, targetElement: target });
-            this.handleOnOpenEvent(event);
-            return;
+            this.setState({ targetElement: target, open: true });
         }
-        event.persist();
-        this.openTimeout = setTimeout(function () {
-            _this.setState({ renderTooltipItem: true, targetElement: _this.targetElement });
-            if (_this.targetElement.hasAttribute('title')) {
-                _this.handleOnOpenEvent(event);
-            }
-        }, this.props.openDelay);
-    };
-    Tooltip.prototype.hideToolTip = function (event) {
-        if (this.openedElement) {
-            this.openedElement.setAttribute('title', this.title);
+        else {
+            this.openTimeout = setTimeout(function () { _this.setState({ targetElement: target, open: true }); }, this.props.openDelay);
         }
-        if (this.openedElement && this.state.renderTooltipItem) {
-            this.setState({ renderTooltipItem: false });
-            dispatchEvent(this.props.onClose, event, this, undefined);
-        }
-        this.openedElement = null;
     };
@@ -224,7 +205,8 @@ Tooltip.prototype.isVisible = function (element) {
         position: 'auto',
-        showCallout: true
+        showCallout: true,
+        parentTitle: false
     };
     return Tooltip;
-}(React.Component));
+}(React.PureComponent));
 export { Tooltip };
 //# sourceMappingURL=Tooltip.js.map

dist/es/TooltipProps.d.ts

@@ -39,2 +39,6 @@ import { TooltipEvent } from './events';
     /**
+     * Show a Tooltip if any of the parent elements has a title.
+     */
+    parentTitle?: boolean;
+    /**
      * Specifies if the Tooltip callout will be displayed.
@@ -41,0 +45,0 @@ */

dist/es/utils.js

@@ -95,8 +95,11 @@ var arrowWidth = 10;
 export var isTooltipElement = function (element) {
-    var node = element.parentNode;
+    if (element === null) {
+        return false;
+    }
+    var node = element;
     while (node) {
-        if (node.className === 'k-tooltip') {
+        if (node !== null && node.className === 'k-tooltip') {
             return true;
         }
-        node = node.parentNode;
+        node.parentNode !== null ? node = node.parentNode : node = false;
     }
@@ -103,0 +106,0 @@ return toolTipSelectors.filter(function (t) { return t === element.className; }).length > 0;

dist/npm/Tooltip.d.ts

@@ -8,6 +8,6 @@ import * as React from 'react';
 interface TooltipState {
-    renderTooltipItem: boolean;
     targetElement: HTMLElement | null;
+    open: boolean;
 }
-export declare class Tooltip extends React.Component<TooltipProps, TooltipState> {
+export declare class Tooltip extends React.PureComponent<TooltipProps, TooltipState> {
     /**
@@ -28,2 +28,3 @@ * @hidden
         showCallout: boolean;
+        parentTitle: boolean;
     };
@@ -35,6 +36,4 @@ /**
     private title;
-    private openedElement;
     private top;
     private left;
-    private targetElement;
     private openTimeout;
@@ -49,3 +48,9 @@ /**
     componentWillUnmount(): void;
-    handleMouseLeave: (event: any) => void;
+    /**
+     * The method is used on the MouseOut event to hide the Tooltip.
+     */
+    handleMouseOut: (event: any) => void;
+    /**
+     * The method is used on the MouseOver event to show the Tooltip.
+     */
     handleMouseOver: (event: any) => void;
@@ -56,10 +61,9 @@ /**
     render(): any;
+    private handleBodyMousemove;
     private showToolTip;
-    private hideToolTip;
     private isVisible;
-    private handleOnOpenEvent;
-    private handleBodyMousemove;
     private position;
+    private getTitle;
     private calloutClassName;
 }
 export {};

dist/npm/Tooltip.js

@@ -43,4 +43,4 @@ "use strict";
         _this.state = {
-            renderTooltipItem: false,
-            targetElement: null
+            targetElement: null,
+            open: false
         };
@@ -50,40 +50,30 @@ _this.title = '';
         _this.left = 0;
-        _this.handleMouseLeave = function (event) {
-            var target = event.target;
-            if (utils_1.isTooltipElement(target && target.className)) {
+        /**
+         * The method is used on the MouseOut event to hide the Tooltip.
+         */
+        _this.handleMouseOut = function (event) {
+            var element = document.elementFromPoint(event.clientX, event.clientY);
+            if (utils_1.isTooltipElement(element)) {
                 return;
             }
-            _this.hideToolTip(event);
+            kendo_react_common_1.dispatchEvent(_this.props.onClose, event, _this, undefined);
+            _this.setState({ targetElement: null, open: false });
         };
+        /**
+         * The method is used on the MouseOver event to show the Tooltip.
+         */
         _this.handleMouseOver = function (event) {
             var target = event.target;
-            if (utils_1.isTooltipElement(target) || _this.openedElement === target) {
+            if (!_this.isVisible(target) || utils_1.isTooltipElement(target) || target === _this.state.targetElement) {
                 return;
             }
-            if (target.title === '') {
-                _this.hideToolTip(event);
-                return;
-            }
-            if (!_this.isVisible(target)) {
-                return;
-            }
-            if (_this.state.renderTooltipItem) {
-                kendo_react_common_1.dispatchEvent(_this.props.onClose, event, _this, undefined);
-            }
             _this.showToolTip(event);
+            kendo_react_common_1.dispatchEvent(_this.props.onOpen, event, _this, undefined);
         };
-        _this.handleOnOpenEvent = function (event) {
-            if (_this.targetElement.title !== undefined) {
-                kendo_react_common_1.dispatchEvent(_this.props.onOpen, event, _this, undefined);
-            }
-        };
         _this.handleBodyMousemove = function (event) {
             _this.top = event.clientY;
             _this.left = event.clientX;
-            if (document) {
-                _this.targetElement = event.target || document.body;
-            }
         };
         _this.position = function (element) {
-            var domRect = utils_1.getDomRect(_this.targetElement);
+            var domRect = utils_1.getDomRect(_this.state.targetElement);
             var left = utils_1.getLeftPosition(_this.left, element.offsetWidth, domRect, _this.props.anchorElement, _this.props.position);
@@ -93,2 +83,11 @@ var top = utils_1.getTopPosition(_this.top, domRect, element.offsetHeight, _this.props.anchorElement, _this.props.position);
         };
+        _this.getTitle = function (element) {
+            while (element) {
+                if (element.title || element.titleExpando) {
+                    return element.title || element.titleExpando;
+                }
+                element = _this.props.parentTitle && element.parentElement || null;
+            }
+            return '';
+        };
         _this.calloutClassName = function () {
@@ -138,4 +137,4 @@ switch (_this.props.position) {
                     tooltip_1.handleMouseOver(event);
-                } }, onMouseLeave: function (event) { if (tooltip_1) {
-                    tooltip_1.handleMouseLeave(event);
+                } }, onMouseOut: function (event) { if (tooltip_1) {
+                    tooltip_1.handleMouseOut(event);
                 } } },
@@ -145,64 +144,46 @@ React.createElement(Tooltip, __assign({ ref: function (el) { return tooltip_1 = el; } }, options)),
         }
-        var defaultRendering = function () { return (React.createElement("div", { ref: function (el) {
-                if (!el) {
-                    return;
-                }
-                var position = _this.position(el);
-                el.style.left = position.left + 'px';
-                el.style.top = position.top + 'px';
-            }, className: "k-animation-container k-animation-container-fixed k-animation-container-shown", tabIndex: 0 },
-            React.createElement("div", { className: "k-tooltip", style: {
-                    position: 'relative'
-                } },
-                React.createElement("div", { className: "k-tooltip-content" }, _this.props.content &&
-                    React.createElement(_this.props.content, { title: _this.title, target: _this.state.targetElement })
-                    || _this.title),
-                _this.props.showCallout && React.createElement("div", { ref: function (el) {
-                        if (!el) {
-                            return;
-                        }
-                        el.className = _this.calloutClassName();
-                        if (_this.props.position === 'auto') {
-                            _this.left < (window.screen.availWidth / 2)
-                                ? el.style.left = '25%'
-                                : el.style.left = '75%';
-                        }
-                    } })))); };
-        return this.targetElement !== undefined &&
-            this.targetElement.hasAttribute('title') &&
+        return this.state.targetElement &&
+            this.title &&
             document &&
-            this.state.renderTooltipItem &&
-            ReactDOM.createPortal(defaultRendering(), document.body);
+            ReactDOM.createPortal(React.createElement("div", { ref: function (el) {
+                    if (!el) {
+                        return;
+                    }
+                    var position = _this.position(el);
+                    el.style.left = position.left + 'px';
+                    el.style.top = position.top + 'px';
+                }, className: "k-animation-container k-animation-container-fixed k-animation-container-shown", tabIndex: 0 },
+                React.createElement("div", { className: "k-tooltip", style: {
+                        position: 'relative'
+                    } },
+                    React.createElement("div", { className: "k-tooltip-content" }, this.props.content &&
+                        React.createElement(this.props.content, { title: this.title, target: this.state.targetElement })
+                        || this.title),
+                    this.props.showCallout && React.createElement("div", { ref: function (el) {
+                            if (!el) {
+                                return;
+                            }
+                            el.className = _this.calloutClassName();
+                            if (_this.props.position === 'auto') {
+                                _this.left < (window.screen.availWidth / 2)
+                                    ? el.style.left = '25%'
+                                    : el.style.left = '75%';
+                            }
+                        } }))), document.body);
     };
     Tooltip.prototype.showToolTip = function (event) {
         var _this = this;
-        if (this.openedElement) {
-            this.openedElement.setAttribute('title', this.title);
+        var target = event.target;
+        clearTimeout(this.openTimeout);
+        this.title = this.getTitle(event.target);
+        if (this.title) {
+            target.titleExpando = target.titleExpando || target.title;
+            target.title = '';
         }
-        var target = this.openedElement = event.target;
-        this.title = target.title;
-        target.setAttribute('title', '');
-        clearTimeout(this.openTimeout);
         if (!this.props.openDelay) {
-            this.setState({ renderTooltipItem: true, targetElement: target });
-            this.handleOnOpenEvent(event);
-            return;
+            this.setState({ targetElement: target, open: true });
         }
-        event.persist();
-        this.openTimeout = setTimeout(function () {
-            _this.setState({ renderTooltipItem: true, targetElement: _this.targetElement });
-            if (_this.targetElement.hasAttribute('title')) {
-                _this.handleOnOpenEvent(event);
-            }
-        }, this.props.openDelay);
-    };
-    Tooltip.prototype.hideToolTip = function (event) {
-        if (this.openedElement) {
-            this.openedElement.setAttribute('title', this.title);
+        else {
+            this.openTimeout = setTimeout(function () { _this.setState({ targetElement: target, open: true }); }, this.props.openDelay);
         }
-        if (this.openedElement && this.state.renderTooltipItem) {
-            this.setState({ renderTooltipItem: false });
-            kendo_react_common_1.dispatchEvent(this.props.onClose, event, this, undefined);
-        }
-        this.openedElement = null;
     };
@@ -226,7 +207,8 @@ Tooltip.prototype.isVisible = function (element) {
         position: 'auto',
-        showCallout: true
+        showCallout: true,
+        parentTitle: false
     };
     return Tooltip;
-}(React.Component));
+}(React.PureComponent));
 exports.Tooltip = Tooltip;
 //# sourceMappingURL=Tooltip.js.map

dist/npm/TooltipProps.d.ts

@@ -39,2 +39,6 @@ import { TooltipEvent } from './events';
     /**
+     * Show a Tooltip if any of the parent elements has a title.
+     */
+    parentTitle?: boolean;
+    /**
      * Specifies if the Tooltip callout will be displayed.
@@ -41,0 +45,0 @@ */

dist/npm/utils.js

@@ -97,8 +97,11 @@ "use strict";
 exports.isTooltipElement = function (element) {
-    var node = element.parentNode;
+    if (element === null) {
+        return false;
+    }
+    var node = element;
     while (node) {
-        if (node.className === 'k-tooltip') {
+        if (node !== null && node.className === 'k-tooltip') {
             return true;
         }
-        node = node.parentNode;
+        node.parentNode !== null ? node = node.parentNode : node = false;
     }
@@ -105,0 +108,0 @@ return exports.toolTipSelectors.filter(function (t) { return t === element.className; }).length > 0;

dist/systemjs/kendo-react-tooltip.js

@@ -1,1 +0,1 @@
-System.register("@progress/kendo-react-tooltip",["react","react-dom","prop-types","@progress/kendo-react-common"],function(i){var o,n,r,l;function e(t){return t.__useDefault?t.default:t}return{setters:[function(t){o=e(t)},function(t){n=e(t)},function(t){r=e(t)},function(t){l=e(t)}],execute:function(){!function(o){var n={};function i(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return o[t].call(e.exports,e,e.exports,i),e.l=!0,e.exports}i.m=o,i.c=n,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(o,n,function(t){return e[t]}.bind(null,n));return o},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=o(1);e.Tooltip=n.Tooltip,function(t){for(var e in t)i(e,t[e])}(e)},function(t,e,o){"use strict";var n,i=this&&this.__extends||(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])},function(t,e){function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}),l=this&&this.__assign||Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var i in e=arguments[o])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},s=this&&this.__rest||function(t,e){var o={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(t);i<n.length;i++)e.indexOf(n[i])<0&&(o[n[i]]=t[n[i]])}return o};Object.defineProperty(e,"__esModule",{value:!0});var a=o(2),p=o(3),u=o(4),c=o(5),f=o(6),r=function(t){function r(){var o=null!==t&&t.apply(this,arguments)||this;return o.state={renderTooltipItem:!1,targetElement:null},o.title="",o.top=0,o.left=0,o.handleMouseLeave=function(t){var e=t.target;f.isTooltipElement(e&&e.className)||o.hideToolTip(t)},o.handleMouseOver=function(t){var e=t.target;f.isTooltipElement(e)||o.openedElement===e||(""!==e.title?o.isVisible(e)&&(o.state.renderTooltipItem&&c.dispatchEvent(o.props.onClose,t,o,void 0),o.showToolTip(t)):o.hideToolTip(t))},o.handleOnOpenEvent=function(t){void 0!==o.targetElement.title&&c.dispatchEvent(o.props.onOpen,t,o,void 0)},o.handleBodyMousemove=function(t){o.top=t.clientY,o.left=t.clientX,document&&(o.targetElement=t.target||document.body)},o.position=function(t){var e=f.getDomRect(o.targetElement);return{left:f.getLeftPosition(o.left,t.offsetWidth,e,o.props.anchorElement,o.props.position),top:f.getTopPosition(o.top,e,t.offsetHeight,o.props.anchorElement,o.props.position)}},o.calloutClassName=function(){switch(o.props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return o.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},o}return i(r,t),r.prototype.componentDidMount=function(){document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)},r.prototype.componentWillUnmount=function(){clearTimeout(this.openTimeout),this.openTimeout=void 0,document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove)},r.prototype.render=function(){var o=this;if(this.props.children){var t=this.props,e=t.children,n=s(t,["children"]),i=null;return a.createElement("div",{onMouseOver:function(t){i&&i.handleMouseOver(t)},onMouseLeave:function(t){i&&i.handleMouseLeave(t)}},a.createElement(r,l({ref:function(t){return i=t}},n)),e)}return void 0!==this.targetElement&&this.targetElement.hasAttribute("title")&&document&&this.state.renderTooltipItem&&p.createPortal(a.createElement("div",{ref:function(t){if(t){var e=o.position(t);t.style.left=e.left+"px",t.style.top=e.top+"px"}},className:"k-animation-container k-animation-container-fixed k-animation-container-shown",tabIndex:0},a.createElement("div",{className:"k-tooltip",style:{position:"relative"}},a.createElement("div",{className:"k-tooltip-content"},o.props.content&&a.createElement(o.props.content,{title:o.title,target:o.state.targetElement})||o.title),o.props.showCallout&&a.createElement("div",{ref:function(t){t&&(t.className=o.calloutClassName(),"auto"===o.props.position&&(o.left<window.screen.availWidth/2?t.style.left="25%":t.style.left="75%"))}}))),document.body)},r.prototype.showToolTip=function(t){var e=this;this.openedElement&&this.openedElement.setAttribute("title",this.title);var o=this.openedElement=t.target;if(this.title=o.title,o.setAttribute("title",""),clearTimeout(this.openTimeout),!this.props.openDelay)return this.setState({renderTooltipItem:!0,targetElement:o}),void this.handleOnOpenEvent(t);t.persist(),this.openTimeout=setTimeout(function(){e.setState({renderTooltipItem:!0,targetElement:e.targetElement}),e.targetElement.hasAttribute("title")&&e.handleOnOpenEvent(t)},this.props.openDelay)},r.prototype.hideToolTip=function(t){this.openedElement&&this.openedElement.setAttribute("title",this.title),this.openedElement&&this.state.renderTooltipItem&&(this.setState({renderTooltipItem:!1}),c.dispatchEvent(this.props.onClose,t,this,void 0)),this.openedElement=null},r.prototype.isVisible=function(t){return!this.props.filter||this.props.filter(t)},r.propTypes={anchorElement:u.oneOf(["pointer","target"]),content:u.func,filter:u.func,openDelay:u.number,position:u.oneOf(["right","left","top","bottom","auto"])},r.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0},r}(a.Component);e.Tooltip=r},function(t,e){t.exports=o},function(t,e){t.exports=n},function(t,e){t.exports=r},function(t,e){t.exports=l},function(t,o,e){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.getLeftPosition=function(t,e,o,n,i){switch(i){case"bottom":return"pointer"===n?t-e/2:o.left-e/2+o.width/2;case"left":return"pointer"===n?t-e-10:o.left-e-10;case"right":return"pointer"===n?t+10:o.right+10;case"top":return"pointer"===n?t-e/2:o.left-e/2+o.width/2;default:return"pointer"===n?t<window.screen.availWidth/2?t-10:t-e+10:t<window.screen.availWidth/2?o.left:o.right-e}},o.getTopPosition=function(t,e,o,n,i){switch(i){case"bottom":return"pointer"===n?t+10:e.bottom+10;case"left":case"right":return"pointer"===n?t-o/2:e.top-o/2+e.height/2;case"top":return"pointer"===n?t-o-10:e.top-o-10;default:return"pointer"===n?t<window.innerHeight/2?t+10:t-o-10:t<window.innerHeight/2?e.bottom+10:e.top-o-10}},o.getDomRect=function(t){return null!==t?t.getBoundingClientRect():document.body.getBoundingClientRect()},o.toolTipSelectors=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],o.isTooltipElement=function(e){for(var t=e.parentNode;t;){if("k-tooltip"===t.className)return!0;t=t.parentNode}return 0<o.toolTipSelectors.filter(function(t){return t===e.className}).length}}])}}});
+System.register("@progress/kendo-react-tooltip",["react","@progress/kendo-react-common","react-dom","prop-types"],function(r){var o,n,i,l;function e(t){return t.__useDefault?t.default:t}return{setters:[function(t){o=e(t)},function(t){n=e(t)},function(t){i=e(t)},function(t){l=e(t)}],execute:function(){!function(o){var n={};function r(t){if(n[t])return n[t].exports;var e=n[t]={i:t,l:!1,exports:{}};return o[t].call(e.exports,e,e.exports,r),e.l=!0,e.exports}r.m=o,r.c=n,r.d=function(t,e,o){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=0)}([function(t,e,o){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=o(1);e.Tooltip=n.Tooltip,function(t){for(var e in t)r(e,t[e])}(e)},function(t,e,o){"use strict";var n,r=this&&this.__extends||(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o])},function(t,e){function o(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(o.prototype=e.prototype,new o)}),l=this&&this.__assign||Object.assign||function(t){for(var e,o=1,n=arguments.length;o<n;o++)for(var r in e=arguments[o])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},s=this&&this.__rest||function(t,e){var o={};for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(t);r<n.length;r++)e.indexOf(n[r])<0&&(o[n[r]]=t[n[r]])}return o};Object.defineProperty(e,"__esModule",{value:!0});var u=o(2),a=o(3),c=o(4),p=o(5),f=o(6),i=function(t){function i(){var o=null!==t&&t.apply(this,arguments)||this;return o.state={targetElement:null,open:!1},o.title="",o.top=0,o.left=0,o.handleMouseOut=function(t){var e=document.elementFromPoint(t.clientX,t.clientY);f.isTooltipElement(e)||(p.dispatchEvent(o.props.onClose,t,o,void 0),o.setState({targetElement:null,open:!1}))},o.handleMouseOver=function(t){var e=t.target;o.isVisible(e)&&!f.isTooltipElement(e)&&e!==o.state.targetElement&&(o.showToolTip(t),p.dispatchEvent(o.props.onOpen,t,o,void 0))},o.handleBodyMousemove=function(t){o.top=t.clientY,o.left=t.clientX},o.position=function(t){var e=f.getDomRect(o.state.targetElement);return{left:f.getLeftPosition(o.left,t.offsetWidth,e,o.props.anchorElement,o.props.position),top:f.getTopPosition(o.top,e,t.offsetHeight,o.props.anchorElement,o.props.position)}},o.getTitle=function(t){for(;t;){if(t.title||t.titleExpando)return t.title||t.titleExpando;t=o.props.parentTitle&&t.parentElement||null}return""},o.calloutClassName=function(){switch(o.props.position){case"bottom":return"k-callout k-callout-n";case"left":return"k-callout k-callout-e";case"right":return"k-callout k-callout-w";case"top":return"k-callout k-callout-s";default:return o.top<window.innerHeight/2?"k-callout k-callout-n":"k-callout k-callout-s"}},o}return r(i,t),i.prototype.componentDidMount=function(){document&&document.body.addEventListener("mousemove",this.handleBodyMousemove)},i.prototype.componentWillUnmount=function(){clearTimeout(this.openTimeout),this.openTimeout=void 0,document&&document.body.removeEventListener("mousemove",this.handleBodyMousemove)},i.prototype.render=function(){var o=this;if(this.props.children){var t=this.props,e=t.children,n=s(t,["children"]),r=null;return u.createElement("div",{onMouseOver:function(t){r&&r.handleMouseOver(t)},onMouseOut:function(t){r&&r.handleMouseOut(t)}},u.createElement(i,l({ref:function(t){return r=t}},n)),e)}return this.state.targetElement&&this.title&&document&&a.createPortal(u.createElement("div",{ref:function(t){if(t){var e=o.position(t);t.style.left=e.left+"px",t.style.top=e.top+"px"}},className:"k-animation-container k-animation-container-fixed k-animation-container-shown",tabIndex:0},u.createElement("div",{className:"k-tooltip",style:{position:"relative"}},u.createElement("div",{className:"k-tooltip-content"},this.props.content&&u.createElement(this.props.content,{title:this.title,target:this.state.targetElement})||this.title),this.props.showCallout&&u.createElement("div",{ref:function(t){t&&(t.className=o.calloutClassName(),"auto"===o.props.position&&(o.left<window.screen.availWidth/2?t.style.left="25%":t.style.left="75%"))}}))),document.body)},i.prototype.showToolTip=function(t){var e=this,o=t.target;clearTimeout(this.openTimeout),this.title=this.getTitle(t.target),this.title&&(o.titleExpando=o.titleExpando||o.title,o.title=""),this.props.openDelay?this.openTimeout=setTimeout(function(){e.setState({targetElement:o,open:!0})},this.props.openDelay):this.setState({targetElement:o,open:!0})},i.prototype.isVisible=function(t){return!this.props.filter||this.props.filter(t)},i.propTypes={anchorElement:c.oneOf(["pointer","target"]),content:c.func,filter:c.func,openDelay:c.number,position:c.oneOf(["right","left","top","bottom","auto"])},i.defaultProps={anchorElement:"pointer",openDelay:400,position:"auto",showCallout:!0,parentTitle:!1},i}(u.PureComponent);e.Tooltip=i},function(t,e){t.exports=o},function(t,e){t.exports=i},function(t,e){t.exports=l},function(t,e){t.exports=n},function(t,o,e){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.getLeftPosition=function(t,e,o,n,r){switch(r){case"bottom":return"pointer"===n?t-e/2:o.left-e/2+o.width/2;case"left":return"pointer"===n?t-e-10:o.left-e-10;case"right":return"pointer"===n?t+10:o.right+10;case"top":return"pointer"===n?t-e/2:o.left-e/2+o.width/2;default:return"pointer"===n?t<window.screen.availWidth/2?t-10:t-e+10:t<window.screen.availWidth/2?o.left:o.right-e}},o.getTopPosition=function(t,e,o,n,r){switch(r){case"bottom":return"pointer"===n?t+10:e.bottom+10;case"left":case"right":return"pointer"===n?t-o/2:e.top-o/2+e.height/2;case"top":return"pointer"===n?t-o-10:e.top-o-10;default:return"pointer"===n?t<window.innerHeight/2?t+10:t-o-10:t<window.innerHeight/2?e.bottom+10:e.top-o-10}},o.getDomRect=function(t){return null!==t?t.getBoundingClientRect():document.body.getBoundingClientRect()},o.toolTipSelectors=["k-tooltip-content","k-animation-container","k-tooltip","k-tooltip-title","k-tooltip k-tooltip-closable","k-icon k-i-close"],o.isTooltipElement=function(e){if(null===e)return!1;for(var t=e;t;){if(null!==t&&"k-tooltip"===t.className)return!0;t=null!==t.parentNode&&t.parentNode}return 0<o.toolTipSelectors.filter(function(t){return t===e.className}).length}}])}}});

package.json

 {
   "name": "@progress/kendo-react-tooltip",
-  "version": "2.7.0-dev.201902221818",
+  "version": "2.7.0-dev.201902260733",
   "description": "KendoReact Tooltip package",
@@ -30,3 +30,3 @@ "repository": {
   "dependencies": {
-    "@progress/kendo-react-common": "2.7.0-dev.201902221818",
+    "@progress/kendo-react-common": "2.7.0-dev.201902260733",
     "prop-types": "^15.6.0"
@@ -33,0 +33,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

72503

decreased by-3.49%

Lines of code

946

decreased by-1.46%

Dependency changes

• + Added@progress/kendo-react-common@2.7.0-dev.201902260733(transitive)

• - Removed@progress/kendo-react-common@2.7.0-dev.201902221818(transitive)

• Updated@progress/kendo-react-common@2.7.0-dev.201902260733