Browse Source

fix : show tooltip only on truncate

fix/show-tooltip-on-truncate
Mohammed Musharaf 12 months ago
parent
commit
7540d77c27
  1. 6
      packages/nc-gui/components/nc/Tooltip.vue
  2. 5
      packages/nc-gui/components/smartsheet/header/Cell.vue

6
packages/nc-gui/components/nc/Tooltip.vue

@ -65,12 +65,14 @@ onKeyStroke(
) )
watch([isHovering, () => modifierKey.value, () => disabled.value], ([hovering, key, isDisabled]) => { watch([isHovering, () => modifierKey.value, () => disabled.value], ([hovering, key, isDisabled]) => {
if (!hovering || isDisabled) { const targetElement = el?.value
const isElementTruncated = targetElement?.scrollWidth > targetElement?.clientWidth
if (!hovering || isDisabled || !isElementTruncated) {
showTooltip.value = false showTooltip.value = false
return return
} }
// Show tooltip on mouseover if no modifier key is provided // Show tooltip on mouseover if no modifier key is providedInvy
if (hovering && !key) { if (hovering && !key) {
showTooltip.value = true showTooltip.value = true
return return

5
packages/nc-gui/components/smartsheet/header/Cell.vue

@ -99,12 +99,13 @@ const onClick = (e: Event) => {
}" }"
class="name pl-1" class="name pl-1"
placement="bottom" placement="bottom"
:data-test-id="column.title"
> >
<template #title> {{ column.title }} </template> <template #title> {{ column.title }} </template>
<div :class="{ truncate: !isForm }" :data-test-id="column.title"> <span>
{{ column.title }} {{ column.title }}
</div> </span>
</NcTooltip> </NcTooltip>
<span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span> <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>

Loading…
Cancel
Save