:art: 关联字段选项文本过长的条目加上悬浮提示

app/src/block/popover.ts

@@ -23,7 +23,8 @@ export const initBlockPopover = (app: App) => {
             hasClosestByClassName(event.target, "ariaLabel") ||
             hasClosestByAttribute(event.target, "data-type", "inline-memo") ||
             hasClosestByClassName(event.target, "av__calc--ashow") ||
-            hasClosestByClassName(event.target, "av__cell");
+            hasClosestByClassName(event.target, "av__cell")||
+            hasClosestByAttribute(event.target, "data-type", "setRelationCell");
         if (aElement) {
             const tooltipClasses: string[] = [];
             let tip = aElement.getAttribute("aria-label") || "";
@@ -72,6 +73,11 @@ export const initBlockPopover = (app: App) => {
                 tooltipClasses.push("href");
             } else if (aElement.classList.contains("av__calc--ashow") && aElement.clientWidth + 2 < aElement.scrollWidth) {
                 tip = aElement.lastChild.textContent + " " + aElement.firstElementChild.textContent;
+            } else if (aElement.getAttribute("data-type") === "setRelationCell") {
+                const childElement = aElement.querySelector(".b3-menu__label");
+                if (childElement && childElement.clientWidth < childElement.scrollWidth) {
+                    tip = childElement.textContent;
+                }
             }
             if (!tip) {
                 tip = aElement.getAttribute("data-inline-memo-content");

app/src/dialog/tooltip.ts

@@ -67,7 +67,7 @@ export const showTooltip = (message: string, target: Element, tooltipClasses?: s
     messageElement.style.maxHeight = Math.max(topHeight, bottomHeight) + "px";
 
     if (top + messageElement.clientHeight > window.innerHeight && topHeight > bottomHeight) {
-        messageElement.style.top = ((position === "parentE" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
+        messageElement.style.top = ((position === "parentE" || position === "west" ? parentRect.bottom : targetRect.top) - messageElement.clientHeight) + "px";
     } else {
         messageElement.style.top = top + "px";
     }

app/src/protyle/render/av/relation.ts

@@ -224,7 +224,7 @@ const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string,
 </button>`;
     }
     if (type == "unselect") {
-        return `<button data-id="${id}" class="b3-menu__item" data-type="setRelationCell">
+        return `<button data-id="${id}" class="b3-menu__item" data-position="west" data-type="setRelationCell">
     <span class="b3-menu__label fn__ellipsis${isDetached ? "" : " popover__block"}" ${isDetached ? "" : 'style="color:var(--b3-protyle-inline-blockref-color)"'} data-id="${id}">${text}</span>
     <svg class="b3-menu__action"><use xlink:href="#iconAdd"></use></svg>
 </button>`;
@@ -242,7 +242,7 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
         const hasIds: string[] = [];
         cellElement.querySelectorAll("span").forEach((item) => {
             hasIds.push(item.dataset.id);
-            selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
+            selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell" class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
         });
         cells.forEach((item) => {
             if (!hasIds.includes(item.block.id)) {
@@ -273,7 +273,7 @@ export const bindRelationEvent = (options: {
         const hasIds: string[] = [];
         options.cellElements[0].querySelectorAll("span").forEach((item) => {
             hasIds.push(item.dataset.id);
-            selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
+            selectHTML += `<button data-id="${item.dataset.id}" data-position="west" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || window.siyuan.languages.untitled)}</button>`;
         });
         cells.forEach((item) => {
             if (!hasIds.includes(item.block.id)) {
@@ -399,7 +399,7 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
                 isDetached: !target.firstElementChild.getAttribute("style")
             });
             separatorElement.before(target);
-            target.outerHTML = `<button data-id="${targetId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent)}</button>`;
+            target.outerHTML = `<button data-id="${targetId}" data-position="west" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent)}</button>`;
             if (!separatorElement.nextElementSibling) {
                 separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
             }
@@ -431,7 +431,7 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
                 },
                 isDetached: true
             });
-            separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, content)}</button>`);
+            separatorElement.insertAdjacentHTML("beforebegin", `<button data-id="${rowId}" data-position="west" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", rowId, true, content)}</button>`);
         }
         menuElement.querySelector(".b3-menu__item--current")?.classList.remove("b3-menu__item--current");
         menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");