fix(ellipsis): can't show tooltip if content width is very close to c…

…ontainer width, closes #1393, closes #2899
tusen-ai · May 8, 2022 · 3d2074d · 3d2074d
1 parent bfc0b2a
commit 3d2074d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 2 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -11,6 +11,7 @@
 - Fix `n-data-table`'s `work-break` isn't `break-word`.
 - Fix `n-list`'s css variable `n-merged-color` is not correct.
 - Fix `MessageReactive`'s `destroy` method throws error if message has disappeared.
+- Fix `n-ellpisis` can't show tooltip if content width is very close to container width, closes [#1393](https://github.com/TuSimple/naive-ui/issues/1393), [#2899](https://github.com/TuSimple/naive-ui/issues/2899).
 
 ### Feats
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -11,6 +11,7 @@
 - 修复 `n-data-table` 的 `work-break` 样式为 `break-word`
 - 修复 `n-list` 的 `n-merged-color` 样式不正常
 - 修复 `MessageReactive` 的 `destroy` 方法在 message 消失后调用会抛错
+- 修复 `n-ellpisis` 在恰好触发省略的时候无法弹出 tooltip，关闭 [#1393](https://github.com/TuSimple/naive-ui/issues/1393)、[#2899](https://github.com/TuSimple/naive-ui/issues/2899)
 
 ### Feats
 

diff --git a/src/ellipsis/demos/zhCN/index.demo-entry.md b/src/ellipsis/demos/zhCN/index.demo-entry.md
@@ -12,6 +12,7 @@ line-clamp.vue
 expand-trigger.vue
 custom-tooltip.vue
 dynamic-debug.vue
+width-debug.vue
 ```
 
 ## API

diff --git a/src/ellipsis/demos/zhCN/width-debug.demo.vue b/src/ellipsis/demos/zhCN/width-debug.demo.vue
@@ -0,0 +1,9 @@
+<markdown>
+# Width debug
+</markdown>
+
+<template>
+  <n-ellipsis style="width: 70px; font-family: 'Helvetica Neue'">
+    624748504
+  </n-ellipsis>
+</template>
diff --git a/src/ellipsis/src/Ellipsis.tsx b/src/ellipsis/src/Ellipsis.tsx
@@ -44,6 +44,7 @@ export default defineComponent({
       mergedClsPrefixRef
     )
     const triggerRef = ref<HTMLElement | null>(null)
+    const triggerInnerRef = ref<HTMLElement | null>(null)
     const tooltipRef = ref<TooltipInst | null>(null)
     const expandedRef = ref(false)
     const ellipsisStyleRef = computed(() => {
@@ -74,7 +75,12 @@ export default defineComponent({
         if (lineClamp !== undefined) {
           tooltipDisabled = trigger.scrollHeight <= trigger.offsetHeight
         } else {
-          tooltipDisabled = trigger.scrollWidth <= trigger.offsetWidth
+          const { value: triggerInner } = triggerInnerRef
+          if (triggerInner) {
+            tooltipDisabled =
+              triggerInner.getBoundingClientRect().width <=
+              trigger.getBoundingClientRect().width
+          }
         }
         syncCursorStyle(trigger, tooltipDisabled)
       }
@@ -112,7 +118,7 @@ export default defineComponent({
           props.expandTrigger === 'click' ? getTooltipDisabled : undefined
         }
       >
-        {slots}
+        {props.lineClamp ? slots : <span ref="triggerInnerRef">{slots}</span>}
       </span>
     )
     function syncEllipsisStyle (trigger: HTMLElement): void {
@@ -160,6 +166,7 @@ export default defineComponent({
     return {
       mergedTheme,
       triggerRef,
+      triggerInnerRef,
       tooltipRef,
       handleClick: handleClickRef,
       renderTrigger,