diff --git a/packages/ui-vue/components/tooltip/src/composition/use-adjust-position.ts b/packages/ui-vue/components/tooltip/src/composition/use-adjust-position.ts
index c353feb..87c0cb5 100644
--- a/packages/ui-vue/components/tooltip/src/composition/use-adjust-position.ts
+++ b/packages/ui-vue/components/tooltip/src/composition/use-adjust-position.ts
@@ -1,3 +1,4 @@
+import { DomEvent } from "@vue/test-utils/dist/constants/dom-events";
import { SetupContext } from "vue";
import { TooltipPlacement, TooltipProps } from "../tooltip.props";
import { RectPosition, TooltipPosition } from "./types";
@@ -28,10 +29,15 @@ export function useAdjustPosition(props: TooltipProps, context: SetupContext) {
placementAndAlignment: TooltipPlacement,
originalPosition: TooltipPosition,
relativeElementRect: DOMRect,
- tooltipRect: DOMRect
+ hostRect: DOMRect,
+ tooltipRect: DOMRect,
+ tooltipContentRect: DOMRect,
+ arrowRect: DOMRect
): TooltipPosition {
let fixedLeft = originalPosition.tooltip.left;
let fixedTop = originalPosition.tooltip.top;
+ let fixedArrowLeft = originalPosition.arrow.left;
+ let fixedArrowTop = originalPosition.arrow.top;
const placementAndAlignmentArray = placementAndAlignment.split('-');
const placement = placementAndAlignmentArray[0];
if (['top', 'bottom'].includes(placement)) {
@@ -40,14 +46,24 @@ export function useAdjustPosition(props: TooltipProps, context: SetupContext) {
fixedLeft = overLeftBound.overBound ?
overLeftBound.fixedValue :
(overRightBound.overBound ? overRightBound.fixedValue - tooltipRect.width : originalPosition.tooltip.left);
+ fixedArrowLeft = overLeftBound.overBound ?
+ tooltipRect.width - ((fixedLeft + tooltipRect.width) - hostRect.right) - arrowRect.width :
+ (overRightBound.overBound ? hostRect.left - fixedLeft : originalPosition.arrow.left);
}
const overTopBound = isOverstepBoundary(relativeElementRect, 'top', originalPosition.tooltip.top);
const overBottomBound = isOverstepBoundary(relativeElementRect, 'bottom', originalPosition.tooltip.top + tooltipRect.height);
fixedTop = overTopBound.overBound ?
overTopBound.fixedValue :
(overBottomBound.overBound ? overBottomBound.fixedValue - tooltipRect.height : originalPosition.tooltip.top);
+ fixedArrowTop = overTopBound.overBound ?
+ (originalPosition.arrow.top) :
+ (overBottomBound.overBound ?
+ (
+ tooltipRect.height - ((fixedTop + tooltipRect.height) - hostRect.top)
+ ) :
+ originalPosition.arrow.top);
const tooltip = { left: fixedLeft, top: fixedTop };
- const arrow = { left: originalPosition.arrow.left, top: originalPosition.arrow.top };
+ const arrow = { left: fixedArrowLeft, top: fixedArrowTop };
return { arrow, tooltip };
}
diff --git a/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts b/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
index dcefbb7..6425f06 100644
--- a/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
+++ b/packages/ui-vue/components/tooltip/src/composition/use-tooltip-position.ts
@@ -14,8 +14,6 @@ export function useTooltipPosition(
tooltipContentRect: DOMRect,
arrowRect: DOMRect) {
- const { scrollLeft, scrollTop } = document.documentElement;
-
const placementAndAlignment = ref(props.placement);
const { getRelativeElementBound } = useRelative(props, context);
@@ -34,7 +32,9 @@ export function useTooltipPosition(
const relativeRect = getRelativeElementBound();
placementAndAlignment.value = adjustPlacement(placementAndAlignment.value, relativeRect, hostRect, tooltipRect, arrowRect);
const originalPosition = calculate(placementAndAlignment.value, hostRect, tooltipRect, tooltipContentRect, arrowRect);
- const position = adjustPosition(placementAndAlignment.value, originalPosition, relativeRect, tooltipRect);
+ const position = adjustPosition(
+ placementAndAlignment.value, originalPosition, relativeRect, hostRect, tooltipRect, tooltipContentRect, arrowRect
+ );
return position;
});
diff --git a/packages/ui-vue/components/tooltip/src/tooltip.component.tsx b/packages/ui-vue/components/tooltip/src/tooltip.component.tsx
index 1f410bc..b0a5662 100644
--- a/packages/ui-vue/components/tooltip/src/tooltip.component.tsx
+++ b/packages/ui-vue/components/tooltip/src/tooltip.component.tsx
@@ -24,6 +24,8 @@ export default defineComponent({
return classObject;
});
+ const { scrollLeft, scrollTop } = document.documentElement;
+
const shouldShowTooltipText = computed(() => isTextContext.value);
const tooltipText = computed(() => props.content);
@@ -64,9 +66,8 @@ export default defineComponent({
tooltipInnerRef.value.getBoundingClientRect(),
arrowRef.value.getBoundingClientRect()
);
- tooltipLeftPosition.value = `${tooltipPosition.value.tooltip.left}px`;
- tooltipRightPosition.value = `${tooltipPosition.value.tooltip.right}px`;
- tooltipTopPosition.value = `${tooltipPosition.value.tooltip.top}px`;
+ tooltipLeftPosition.value = `${tooltipPosition.value.tooltip.left + scrollLeft}px`;
+ tooltipTopPosition.value = `${tooltipPosition.value.tooltip.top + scrollTop}px`;
arrowLeftPosition.value = `${tooltipPosition.value.arrow.left}px`;
arrowTopPosition.value = `${tooltipPosition.value.arrow.top}px`;
placement.value = tooltipPlacement.value;
diff --git a/packages/ui-vue/components/tooltip/src/tooltip.directive.tsx b/packages/ui-vue/components/tooltip/src/tooltip.directive.tsx
index 817eba7..fb309f0 100644
--- a/packages/ui-vue/components/tooltip/src/tooltip.directive.tsx
+++ b/packages/ui-vue/components/tooltip/src/tooltip.directive.tsx
@@ -43,7 +43,7 @@ const tooltipDirective = {
element.addEventListener('mouseleave', ($event: MouseEvent) => {
$event.stopPropagation();
if (app) {
- // app.unmount();
+ app.unmount();
app = null;
}
});
diff --git a/packages/ui-vue/src/components/tooltip.vue b/packages/ui-vue/src/components/tooltip.vue
index 6ecc660..21d5d56 100644
--- a/packages/ui-vue/src/components/tooltip.vue
+++ b/packages/ui-vue/src/components/tooltip.vue
@@ -10,12 +10,39 @@ const tooltipProps = { placement: 'bottom' };
-