fix(tooltip): support change tooltip position

packages/ui-vue/components/tooltip/src/tooltip.component.tsx

@@ -1,7 +1,8 @@
-import { computed, defineComponent, ref, SetupContext } from 'vue';
+import { computed, defineComponent, onMounted, ref, SetupContext } from 'vue';
 import { TooltipProps, tooltipProps } from './tooltip.props';
 
 import './tooltip.css';
+import { useTooltipPosition } from './composition/use-tooltip-position';
 
 export default defineComponent({
     name: 'FTooltip',
@@ -9,13 +10,15 @@ export default defineComponent({
     emits: [],
     setup(props: TooltipProps, context: SetupContext) {
         const isTextContext = ref(true);
-
+        const arrowRef = ref<HTMLElement>();
+        const tooltipRef = ref<HTMLElement>();
+        const placement = ref(props.placement);
         const tooltipClass = computed(() => {
             const classObject = {
                 tooltip: true,
                 show: true
             } as any;
-            const tooltipClassName = `bs-tooltip-${props.placement}`;
+            const tooltipClassName = `bs-tooltip-${placement.value}`;
             classObject[tooltipClassName] = true;
             return classObject;
         });
@@ -24,10 +27,41 @@ export default defineComponent({
 
         const tooltipText = computed(() => props.content);
 
+        const tooltipLeftPosition = ref('');
+
+        const tooltipTopPosition = ref('');
+
+        const tooltipRightPosition = ref('');
+
+        const tooltipStyle = computed(() => {
+            const styleObject = {
+                left: tooltipLeftPosition.value,
+                top: tooltipTopPosition.value,
+                right: tooltipRightPosition.value
+            };
+            return styleObject;
+        });
+
+        onMounted(() => {
+            if (arrowRef.value && tooltipRef.value && props.reference) {
+                const { arrowPosition, tooltipPlacement, tooltipPosition } = useTooltipPosition(
+                    props,
+                    context,
+                    props.reference.getBoundingClientRect(),
+                    tooltipRef.value.getBoundingClientRect(),
+                    arrowRef.value.getBoundingClientRect()
+                );
+                placement.value = tooltipPlacement.value;
+                tooltipLeftPosition.value = `${tooltipPosition.value.left}px`;
+                tooltipRightPosition.value = `${tooltipPosition.value.right}px`;
+                tooltipTopPosition.value = `${tooltipPosition.value.top}px`;
+            }
+        });
+
         return () => {
             return (
-                <div class={tooltipClass.value}>
-                    <div class="arrow"></div>
+                <div ref={tooltipRef} class={tooltipClass.value} style={tooltipStyle.value}>
+                    <div class="arrow" ref={arrowRef}></div>
                     <div class="tooltip-inner">
                         <div class="tooltip-tmpl">
                             {shouldShowTooltipText.value && <div class="tooltip-text" v-html={tooltipText.value}></div>}

packages/ui-vue/components/tooltip/src/tooltip.directive.tsx

@@ -9,7 +9,7 @@ function initInstance(props: TooltipProps, content?: string): App {
             onUnmounted(() => {
                 document.body.removeChild(container);
             });
-            return () => <Tooltip {...props} onClose={app.unmount}></Tooltip>;
+            return () => <Tooltip {...props}></Tooltip>;
         }
     });
     document.body.appendChild(container);
@@ -33,7 +33,7 @@ const tooltipDirective = {
                 width: 100,
                 customClass: '',
                 placement: 'top',
-                referenceBoundingRect: element.getBoundingClientRect()
+                reference: element
             });
         });
         element.addEventListener('mouseleave', ($event: MouseEvent) => {

packages/ui-vue/components/tooltip/src/tooltip.props.ts

@@ -19,6 +19,9 @@ export const tooltipProps = {
     width: { type: Number },
     customClass: { type: String },
     placement: { type: String as PropType<TooltipPlacement>, default: 'top' },
-    referenceBoundingRect: { type: Object, default: {} }
+    reference: {
+        type: Object as PropType<HTMLElement>,
+        require: true,
+    }
 };
 export type TooltipProps = ExtractPropTypes<typeof tooltipProps>;