Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-04-26 17:44:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improvement/md tooltip (#144)

Browse source 
* fix stucked tooltips #103
This commit is contained in:
Marcos Moura 2016-12-05 01:34:13 -02:00 committed by GitHub
parent 9bc03b1db4
commit e3c8b8e26c
3 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/src/App.vue
View file

@ -254,6 +254,7 @@
padding: 16px;
flex: 1;
overflow: auto;
transform: translate3D(0, 0, 0);
}
.md-router-enter-active,

12
docs/src/pages/components/Tooltip.vue
View file

@ -59,6 +59,10 @@
<md-tooltip md-direction="right">My tooltip</md-tooltip>
</md-avatar>
</div>
<div class="test">
<span v-for="index in 50">{{index}} <md-tooltip md-direction="bottom">My tooltip</md-tooltip></span>
</div>
</div>
<div slot="code">
@ -155,4 +159,12 @@
.md-avatar {
margin: 24px;
}
.test {
width: 100px;
span {
display: inline-block;
}
}
</style>

21
src/components/mdTooltip/mdTooltip.vue
View file

@ -8,7 +8,6 @@
<script>
import transitionEndEventName from '../../core/utils/transitionEndEventName';
import getInViewPosition from '../../core/utils/getInViewPosition';
export default {
props: {
@ -63,8 +62,12 @@
const tooltips = [...document.querySelectorAll('.md-tooltip')];
tooltips.forEach((tooltip) => {
tooltip.parentNode.removeChild(tooltip);
if (tooltip.parentNode) {
this.rootElement.removeChild(tooltip);
}
});
this.tooltipElement.removeEventListener(transitionEndEventName, this.removeTooltips);
},
calculateTooltipPosition() {
let position = this.parentElement.getBoundingClientRect();
@ -99,8 +102,6 @@
console.warn(`Invalid ${this.mdDirection} option to md-direction option`);
}
cssPosition = getInViewPosition(this.tooltipElement, cssPosition);
this.topPosition = cssPosition.top;
this.leftPosition = cssPosition.left;
},
@ -132,17 +133,9 @@
});
},
close() {
let cleanupElements = () => {
this.tooltipElement.removeEventListener(transitionEndEventName, cleanupElements);
if (this.tooltipElement.parentNode && !this.tooltipElement.classList.contains('md-active')) {
this.rootElement.removeChild(this.tooltipElement);
}
};
this.active = false;
this.tooltipElement.removeEventListener(transitionEndEventName, cleanupElements);
this.tooltipElement.addEventListener(transitionEndEventName, cleanupElements);
this.tooltipElement.removeEventListener(transitionEndEventName, this.removeTooltips);
this.tooltipElement.addEventListener(transitionEndEventName, this.removeTooltips);
}
},
mounted() {