Hide tooltip on window resize

pull/132/head
cagataycivici 2019-12-27 09:23:06 +03:00
parent 16aba184b7
commit c2d5dc321a
2 changed files with 14 additions and 9 deletions

View File

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

View File

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