36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import Vue from 'vue';
|
|
import Component from "vue-class-component";
|
|
import { Prop } from "vue-property-decorator";
|
|
|
|
@Component({ template: require('../../components/tooltip.html') })
|
|
export class TooltipComponent extends Vue {
|
|
@Prop({ type: String, default: "auto" }) public placement: string;
|
|
@Prop({ type: Number, default: 100 }) public delay: number;
|
|
|
|
public show: boolean = false;
|
|
public element: Element = null;
|
|
|
|
private _events: { [event: string]: any };
|
|
private _timeout: number;
|
|
|
|
mounted() {
|
|
this.$el.parentElement.addEventListener('mouseenter', this._events['mouseenter'] = () => {
|
|
this._timeout = window.setTimeout(() => { this.show = true }, this.delay);
|
|
});
|
|
|
|
this.$el.parentElement.addEventListener('mouseleave', this._events['mouseleave'] = () => {
|
|
window.clearTimeout(this._timeout);
|
|
this.show = false
|
|
});
|
|
|
|
this.element = this.$el.parentElement;
|
|
}
|
|
|
|
beforeDestroy() {
|
|
this.$el.parentElement.removeEventListener('mouseenter', this._events['mouseenter']);
|
|
this.$el.parentElement.removeEventListener('mouseleave', this._events['mouseleave']);
|
|
}
|
|
}
|
|
|
|
Vue.component('Tooltip', TooltipComponent);
|