Hide tooltip on window resize

src/components/tooltip/Tooltip.js

@@ -25,8 +25,6 @@ function unbindEvents(el) {
         el.removeEventListener('mouseleave', onMouseLeave);
         el.removeEventListener('click', onClick);
     }
-
-    //this.unbindDocumentResizeListener();
 }
 
 function onMouseEnter(event) {
@@ -58,6 +56,11 @@ function show(el) {
     align(el);
     DomHandler.fadeIn(tooltipElement, 250);
     tooltipElement.style.zIndex = ++DomHandler.zindex;
+
+    window.addEventListener('resize', function onWindowResize() {
+        hide(el);
+        this.removeEventListener('resize', onWindowResize);
+    });
 }
 
 function hide(el) {
@@ -92,11 +95,13 @@ function create(el) {
 }
 
 function remove(el) {
-    let tooltipElement = getTooltipElement(el);
-    if (tooltipElement && tooltipElement.parentElement) {
-        document.body.removeChild(tooltipElement);
+    if (el) {
+        let tooltipElement = getTooltipElement(el);
+        if (tooltipElement && tooltipElement.parentElement) {
+            document.body.removeChild(tooltipElement);
+        }
+        el.$_ptooltipId = null;
     }
-    el.$_ptooltipId = null;
 }
 
 function align(el) {

src/views/tooltip/TooltipDoc.vue

@@ -3,15 +3,15 @@
 		<TabView>
 			<TabPanel header="Documentation">
 				<h3>Getting Started</h3>
-				<p>Tooltip is a directive that needs to be imported and configured with a name of your choice.</p>
-<CodeHighlight>
+				<p>Tooltip is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>Vue.directive</i> function.</p>
+<CodeHighlight lang="js">
 import Tooltip from 'primevue/tooltip';
 
 Vue.directive('tooltip', Tooltip);
 </CodeHighlight>
 
                 <p>Tooltip can also be configured locally using the directives property of your component.</p>
-<CodeHighlight>
+<CodeHighlight lang="js">
 directives: {
     tooltip: Tooltip
 }