Improve tooltip behaviour

This commit is contained in:
syuilo 2021-04-17 23:53:05 +09:00
parent 0ba9bdfeeb
commit ef7509a2b5

View file

@ -39,7 +39,7 @@ export default defineComponent({
const contentHeight = this.$refs.content.offsetHeight; const contentHeight = this.$refs.content.offsetHeight;
let left = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); let left = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
let top = rect.top + window.pageYOffset + this.source.offsetHeight; let top = rect.top + window.pageYOffset - contentHeight;
left -= (this.$el.offsetWidth / 2); left -= (this.$el.offsetWidth / 2);
@ -47,9 +47,9 @@ export default defineComponent({
left = window.innerWidth - contentWidth + window.pageXOffset - 1; left = window.innerWidth - contentWidth + window.pageXOffset - 1;
} }
if (top + contentHeight - window.pageYOffset > window.innerHeight) { if (top - window.pageYOffset < 0) {
top = rect.top + window.pageYOffset - contentHeight; top = rect.top + window.pageYOffset + this.source.offsetHeight;
this.$refs.content.style.transformOrigin = 'center bottom'; this.$refs.content.style.transformOrigin = 'center top';
} }
this.$el.style.left = left + 'px'; this.$el.style.left = left + 'px';
@ -81,6 +81,6 @@ export default defineComponent({
text-align: center; text-align: center;
border-radius: 4px; border-radius: 4px;
pointer-events: none; pointer-events: none;
transform-origin: center top; transform-origin: center bottom;
} }
</style> </style>