Hide tooltip on window resize
parent
16aba184b7
commit
c2d5dc321a
|
@ -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,12 +95,14 @@ function create(el) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function remove(el) {
|
function remove(el) {
|
||||||
|
if (el) {
|
||||||
let tooltipElement = getTooltipElement(el);
|
let tooltipElement = getTooltipElement(el);
|
||||||
if (tooltipElement && tooltipElement.parentElement) {
|
if (tooltipElement && tooltipElement.parentElement) {
|
||||||
document.body.removeChild(tooltipElement);
|
document.body.removeChild(tooltipElement);
|
||||||
}
|
}
|
||||||
el.$_ptooltipId = null;
|
el.$_ptooltipId = null;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function align(el) {
|
function align(el) {
|
||||||
const modifiers = el.$_ptooltipModifiers;
|
const modifiers = el.$_ptooltipModifiers;
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue