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) {
+    if (el) {
         let tooltipElement = getTooltipElement(el);
         if (tooltipElement && tooltipElement.parentElement) {
             document.body.removeChild(tooltipElement);
         }
         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
 }