- BsTooltip: prevent displaying tooltip beyond the screen viewport by shifting its coordinates or reversing its placement.

ahmadfajar · ahmadfajar · commit da51177bca39 · 2024-12-28T23:08:29.000+07:00
- BsTooltip: automatically adjust arrow positioning.
- Update CHANGELOG.md
- Bump to version 2.1.4
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,18 @@
 > All notable changes to this project will be documented in this file.
 
 
+## v2.1.4
+
+Released: December 28, 2024
+
+### Features & Improvements
+
+- **BsTooltip**: 
+  - Prevent displaying tooltip beyond the screen viewport by shifting its 
+    coordinates or reversing its placement. 
+  - Automatically adjust arrow positioning. 
+
+
 ## v2.1.3
 
 Released: December 10, 2024
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-mdbootstrap",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Bootstrap5 Material Design Components for Vue.js",
   "author": {
     "name": "Ahmad Fajar",
@@ -71,30 +71,30 @@
   "dependencies": {
     "axios": "^1.7.9",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "fast-xml-parser": "^4.5.0",
+    "fast-xml-parser": "^4.5.1",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
     "resize-observer-polyfill": "^1.5.1",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@tsconfig/node22": "^22.0.0",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash": "^4.17.13",
     "@types/luxon": "^3.4.2",
-    "@types/node": "^22.10.1",
+    "@types/node": "^22.10.2",
     "@vue/tsconfig": "^0.7.0",
     "bootstrap": "5.2.3",
     "clean-css-cli": "^5.6.3",
     "npm-run-all": "^4.1.5",
     "rimraf": "^6.0.1",
     "rollup-plugin-dts": "^6.1.1",
-    "sass": "^1.82.0",
+    "sass": "^1.83.0",
     "terser": "^5.37.0",
     "typescript": "^5.7.2",
-    "vite": "^6.0.3",
+    "vite": "^6.0.6",
     "vue-router": "^4.5.0"
   },
   "browserslist": [
diff --git a/scss/banner.scss b/scss/banner.scss
@@ -1,5 +1,5 @@
 /*!
- * Vue MDBootstrap v2.1.3
+ * Vue MDBootstrap v2.1.4
  * Released under the BSD-3 License.
  * Copyright Ahmad Fajar (https://ahmadfajar.github.io).
  */
diff --git a/src/components/Tooltip/BsTooltip.ts b/src/components/Tooltip/BsTooltip.ts
@@ -64,12 +64,14 @@ export default defineComponent<TBsTooltip>({
     setup(props, { slots }) {
         const thisProps = props as Readonly<TTooltipOptionProps>;
         const tooltip = ref<Element | null>(null);
+        const tooltipArrow = ref<Element | null>(null);
         const activator = ref<Element | null>(null);
         const active = ref<boolean>(false);
         const isDisabled = ref<boolean>(thisProps.disabled ?? false);
         const isActive = computed(() => active.value || thisProps.show);
-        const transitionName = computed(() => `${cssPrefix}tooltip-${thisProps.placement}`);
-        const classNames = computed(() => [`${cssPrefix}tooltip`, transitionName.value]);
+        const placement = ref<TPlacementPosition>(thisProps.placement ?? 'bottom');
+        const transition = computed(() => `${cssPrefix}tooltip-${placement.value}`);
+        const classNames = computed(() => [`${cssPrefix}tooltip`, transition.value]);
         const styles = computed(() => ({
             width: thisProps.width === 'auto' ? undefined : Helper.cssUnit(thisProps.width),
             'max-width': Helper.cssUnit(thisProps.maxWidth),
@@ -78,7 +80,9 @@ export default defineComponent<TBsTooltip>({
             [`--${cssPrefix}tooltip-arrow-width`]: thisProps.arrowOff ? 0 : undefined,
         }));
         const setPosition = () => {
-            nextTick().then(() => useSetTooltipPosition(activator, tooltip, thisProps.placement));
+            nextTick().then(() =>
+                useSetTooltipPosition(activator, tooltip, tooltipArrow, placement)
+            );
         };
 
         let instance: ComponentInternalInstance | null;
@@ -92,12 +96,13 @@ export default defineComponent<TBsTooltip>({
             instance = getCurrentInstance();
             useAddTooltipListener(
                 tooltip,
+                tooltipArrow,
                 activator,
+                placement,
                 active,
                 isDisabled,
                 instance,
-                thisProps.activator,
-                thisProps.placement
+                thisProps.activator
             );
         });
         onBeforeUnmount(() => useRemoveTooltipListener(activator));
@@ -107,7 +112,7 @@ export default defineComponent<TBsTooltip>({
                 h(
                     Teleport,
                     { to: 'body' },
-                    useRenderTransition({ name: transitionName.value }, [
+                    useRenderTransition({ name: transition.value }, [
                         isActive.value
                             ? withDirectives(
                                   h(
@@ -119,7 +124,10 @@ export default defineComponent<TBsTooltip>({
                                       },
                                       [
                                           !thisProps.arrowOff &&
-                                              h('div', { class: 'tooltip-arrow' }),
+                                              h('div', {
+                                                  ref: tooltipArrow,
+                                                  class: 'tooltip-arrow',
+                                              }),
                                           h(
                                               'div',
                                               {
diff --git a/src/components/Tooltip/mixins/tooltipApi.ts b/src/components/Tooltip/mixins/tooltipApi.ts
@@ -16,60 +16,103 @@ const SPACE = 4;
 /**
  * Calculate Tooltip left offset.
  *
+ * @param placementRef Tooltip placement.
  * @param activatorEl  Activator Element
  * @param tooltipWidth Tooltip element width
- * @param placement    Tooltip placement.
  * @returns Tooltip left offset
  */
 function getTooltipLeftPosition(
+    placementRef: Ref<TPlacementPosition>,
     activatorEl: Element,
-    tooltipWidth: number,
-    placement?: TPlacementPosition
-) {
+    tooltipWidth: number
+): number {
     const domRect = activatorEl.getBoundingClientRect();
     const parentRect = activatorEl.parentElement?.getBoundingClientRect();
+    const maxLeft = window.innerWidth - SPACE - tooltipWidth;
+    const plX = domRect.left - tooltipWidth - SPACE;
+    const prX = domRect.left + domRect.width + SPACE;
 
-    switch (placement) {
+    switch (placementRef.value) {
         case 'left':
-            return domRect.left - tooltipWidth - SPACE;
+            if (plX >= SPACE) {
+                return plX;
+            } else {
+                placementRef.value = 'right';
+                return prX;
+            }
         case 'right':
-            return domRect.left + domRect.width + SPACE;
+            if (prX <= maxLeft) {
+                return prX;
+            } else {
+                placementRef.value = 'left';
+                return plX;
+            }
         case 'top':
         case 'bottom':
         default:
-            return (
+            const tx =
                 domRect.left +
                 Math.min(domRect.width / 2, (parentRect?.width ?? domRect.width) / 2) -
-                tooltipWidth / 2
-            );
+                tooltipWidth / 2;
+            return Math.min(maxLeft, tx);
     }
 }
 
 /**
  * Calculate Tooltip top offset.
  *
+ * @param placementRef  Tooltip placement reference.
  * @param activatorEl   Activator Element
  * @param tooltipHeight Tooltip element height
- * @param placement     Tooltip placement.
  * @returns Tooltip top offset
  */
 function getTooltipTopPosition(
+    placementRef: Ref<TPlacementPosition>,
     activatorEl: Element,
-    tooltipHeight: number,
-    placement?: TPlacementPosition
-) {
-    const rect = activatorEl.getBoundingClientRect();
+    tooltipHeight: number
+): number {
+    const domRect = activatorEl.getBoundingClientRect();
+    const ptY = domRect.top - tooltipHeight - SPACE;
+    const pbY = domRect.top + domRect.height + SPACE;
 
-    switch (placement) {
+    switch (placementRef.value) {
         case 'top':
-            return rect.top - tooltipHeight - SPACE;
+            if (ptY >= SPACE) {
+                return ptY;
+            } else {
+                placementRef.value = 'bottom';
+                return pbY;
+            }
         case 'bottom':
-            return rect.top + rect.height + SPACE;
+            const maxY = domRect.bottom + tooltipHeight + SPACE;
+            if (pbY + tooltipHeight <= maxY) {
+                return pbY;
+            } else {
+                placementRef.value = 'top';
+                return ptY;
+            }
         case 'left':
         case 'right':
         default:
-            return rect.top + rect.height / 2 - tooltipHeight / 2;
+            return domRect.top + domRect.height / 2 - tooltipHeight / 2;
+    }
+}
+
+function getArrowLeftPosition(
+    activatorEl: Element,
+    tooltipEl: Element,
+    placement?: TPlacementPosition
+): number {
+    const domRect = activatorEl.getBoundingClientRect();
+    const tooltipRect = tooltipEl.getBoundingClientRect();
+    const domWidth = domRect.width / 2;
+    const arrow = 13 / 2;
+
+    if (placement === 'top' || placement === 'bottom') {
+        return domRect.left - tooltipRect.left + domWidth - arrow;
     }
+
+    return 0;
 }
 
 /**
@@ -120,10 +163,12 @@ function findActivatorElement(
 export function useSetTooltipPosition(
     activatorRef: Ref<Element | null>,
     tooltipRef: Ref<Element | null>,
-    placement?: TPlacementPosition
+    tooltipArrowRef: Ref<Element | null>,
+    placementRef: Ref<TPlacementPosition>
 ): void {
     const activatorEl = unref(activatorRef) as Element | null;
     const tooltipEl = unref(tooltipRef) as HTMLElement | null;
+    const arrowEl = unref(tooltipArrowRef) as HTMLElement | null;
 
     if (!activatorEl || !tooltipEl) {
         return;
@@ -133,20 +178,26 @@ export function useSetTooltipPosition(
         const tooltipRect = tooltipEl.getBoundingClientRect();
 
         tooltipEl.style.top =
-            getTooltipTopPosition(activatorEl, tooltipRect.height, placement) + 'px';
+            getTooltipTopPosition(placementRef, activatorEl, tooltipRect.height) + 'px';
         tooltipEl.style.left =
-            getTooltipLeftPosition(activatorEl, tooltipRect.width, placement) + 'px';
+            getTooltipLeftPosition(placementRef, activatorEl, tooltipRect.width) + 'px';
+
+        if (arrowEl) {
+            const px = getArrowLeftPosition(activatorEl, tooltipEl, placementRef.value);
+            arrowEl.style.left = px > 0 ? `${px}px` : '';
+        }
     }
 }
 
 export function useAddTooltipListener(
     tooltipRef: Ref<Element | null>,
+    tooltipArrowRef: Ref<Element | null>,
     activatorRef: Ref<Element | null>,
+    placementRef: Ref<TPlacementPosition>,
     active: Ref<boolean>,
     disabled: Ref<boolean>,
     instance: ComponentInternalInstance | null,
-    trigger?: string | Element | ComponentPublicInstance,
-    placement?: TPlacementPosition
+    trigger?: string | Element | ComponentPublicInstance
 ) {
     if (!instance) {
         return;
@@ -158,7 +209,7 @@ export function useAddTooltipListener(
         }
 
         window.requestAnimationFrame(() => {
-            useSetTooltipPosition(activatorRef, tooltipRef, placement);
+            useSetTooltipPosition(activatorRef, tooltipRef, tooltipArrowRef, placementRef);
             instance.emit('update:show', true);
             active.value = true;
         });
@@ -173,11 +224,10 @@ export function useAddTooltipListener(
     activatorRef.value = activatorEl;
 
     if (activatorEl) {
-        const options = { capture: true, passive: false };
-
+        // const options = { capture: true, passive: false };
         (activatorEl as IBindingElement).__mouseEvents = {
-            mouseEnter: EventListener.listen(activatorEl, 'mouseenter', showTooltip, options),
-            mouseLeave: EventListener.listen(activatorEl, 'mouseleave', hideTooltip, options),
+            mouseEnter: EventListener.listen(activatorEl, 'mouseenter', showTooltip),
+            mouseLeave: EventListener.listen(activatorEl, 'mouseleave', hideTooltip),
             focus: EventListener.listen(activatorEl, 'focus', showTooltip),
             blur: EventListener.listen(activatorEl, 'blur', hideTooltip),
         };
diff --git a/src/mixins/DomHelper.ts b/src/mixins/DomHelper.ts
@@ -4,32 +4,32 @@ export class EventListener {
     /**
      * Listen to DOM events during the bubble phase.
      *
-     * @param {IHTMLElement} context     DOM element to register listener on.
-     * @param {string} eventType         Event type, e.g. 'click' or 'mouseover'.
+     * @param {IHTMLElement} target      DOM element to register listener on.
+     * @param {string} eventName         Event name, e.g. 'click' or 'mouseover'.
      * @param {function} callback        Callback function.
      * @param {boolean|AddEventListenerOptions} options Listener options.
      * @returns {object} Object with a `remove` method.
      */
     static listen(
-        context: IHTMLElement,
-        eventType: string,
+        target: IHTMLElement,
+        eventName: string,
         callback: EventListenerOrEventListenerObject,
         options?: boolean | AddEventListenerOptions
     ): IEventResult | undefined {
-        if (context.addEventListener) {
-            context.addEventListener(eventType, callback, options);
+        if (target.addEventListener) {
+            target.addEventListener(eventName, callback, options);
 
             return {
                 remove() {
-                    context.removeEventListener(eventType, callback, options);
+                    target.removeEventListener(eventName, callback, options);
                 },
             };
-        } else if (context.attachEvent) {
-            context.attachEvent('on' + eventType, callback);
+        } else if (target.attachEvent) {
+            target.attachEvent('on' + eventName, callback);
 
             return {
                 remove() {
-                    context.detachEvent('on' + eventType, callback);
+                    target.detachEvent('on' + eventName, callback);
                 },
             };
         }
