:art: https://github.com/siyuan-note/siyuan/issues/13262

app/src/assets/scss/business/_av.scss

@@ -470,7 +470,7 @@
       max-width: 50vw;
 
       &__item .b3-chip {
-        max-width: 90vw;
+        max-width: 100%;
         margin: 3px 0;
         padding-top: 4px;
         padding-bottom: 4px;

app/src/dialog/tooltip.ts

@@ -1,8 +1,6 @@
 import {isMobile} from "../util/functions";
 import {Constants} from "../constants";
 
-let hideTooltipTimeout: number
-
 export const showTooltip = (message: string, target: Element, tooltipClass?: string) => {
     if (isMobile()) {
         return;
@@ -13,10 +11,7 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
         return;
     }
 
-    // 清除 hideTooltip 的定时器
-    clearTimeout(hideTooltipTimeout);
-
-    const className = tooltipClass?`tooltip tooltip--${tooltipClass}`:"tooltip";
+    const className = tooltipClass ? `tooltip tooltip--${tooltipClass}` : "tooltip";
     let messageElement = document.getElementById("tooltip");
     if (!messageElement) {
         document.body.insertAdjacentHTML("beforeend", `<div class="${className}" id="tooltip">${message}</div>`);
@@ -87,11 +82,8 @@ export const showTooltip = (message: string, target: Element, tooltipClass?: str
 };
 
 export const hideTooltip = () => {
-    clearTimeout(hideTooltipTimeout);
-    hideTooltipTimeout = window.setTimeout(() => {
-        const messageElement = document.getElementById("tooltip");
-        if (messageElement) {
-            messageElement.remove();
-        }
-    }, Constants.TIMEOUT_TRANSITION);
+    const messageElement = document.getElementById("tooltip");
+    if (messageElement) {
+        messageElement.remove();
+    }
 };

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

@@ -98,7 +98,7 @@ export const getEditHTML = (options: {
         </div>
         <div class="fn__none">
             <div class="fn__hr"></div>
-            <textarea style="margin-left: 22px;width: calc(100% - 22px);" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(colData.desc)}">${colData.desc}</textarea>
+            <textarea style="margin-left: 22px;width: calc(100% - 22px);" placeholder="${window.siyuan.languages.addDesc}" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(colData.desc)}">${colData.desc}</textarea>
         </div>
         <div class="fn__hr--small"></div>
     </div>
@@ -120,10 +120,11 @@ export const getEditHTML = (options: {
             colData.options = [];
         }
         colData.options.forEach(item => {
+            const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>` : ""
             html += `<button class="b3-menu__item${html ? "" : " b3-menu__item--current"}" draggable="true" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" data-color="${item.color}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
-    <div class="fn__flex-1">
-        <span class="b3-chip ariaLabel" data-position="2parentW" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
+    <div class="fn__flex-1 ariaLabel" data-position="2parentW" aria-label="${airaLabel}">
+        <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
             <span class="fn__ellipsis">${escapeHtml(item.name)}</span>
         </span>
     </div>
@@ -667,21 +668,19 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
     });
     menu.addItem({
         iconHTML: "",
-        type: "readonly",
-        label: `<div class="fn__block">
-    <div class="fn__flex">
-        <span class="b3-menu__avemoji">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg style="height: 14px;width: 14px;"><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>
-        <div class="b3-form__icona fn__block">
-            <input class="b3-text-field b3-form__icona-input" type="text">
-            <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${oldDesc ? escapeAriaLabel(oldDesc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
-        </div>
-    </div>
-    <div class="fn__none">
-        <div class="fn__hr"></div>
-        <textarea style="margin-left: 22px;width: calc(100% - 22px);" rows="1" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(oldDesc)}">${oldDesc}</textarea>
+        type: "empty",
+        label: `<div class="fn__hr"></div><div class="fn__flex">
+    <span class="b3-menu__avemoji">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg style="height: 14px;width: 14px;"><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>
+    <div class="b3-form__icona fn__block">
+        <input class="b3-text-field b3-form__icona-input" type="text">
+        <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${oldDesc ? escapeAriaLabel(oldDesc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
     </div>
-    <div class="fn__hr--small"></div>
-</div>`,
+</div>
+<div class="fn__none">
+    <div class="fn__hr"></div>
+    <textarea style="margin-left: 22px;width: calc(100% - 22px);" placeholder="${window.siyuan.languages.addDesc}" rows="1" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(oldDesc)}">${oldDesc}</textarea>
+</div>
+<div class="fn__hr--small"></div>`,
         bind(element) {
             const iconElement = element.querySelector(".b3-menu__avemoji") as HTMLElement;
             iconElement.addEventListener("click", (event) => {

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

@@ -330,7 +330,7 @@ export const setFilter = async (options: {
             menu.addItem({
                 iconHTML: "",
                 type: "readonly",
-                label: `<input class="b3-text-field fn__block" style="margin: 4px 0" placeholder="${window.siyuan.languages.search}">`,
+                label: `<input class="b3-text-field fn__size200" style="margin: 4px 0" placeholder="${window.siyuan.languages.search}">`,
                 bind(element) {
                     const selectSearchElement = element.querySelector("input");
                     selectSearchElement.addEventListener("keydown", (event: KeyboardEvent) => {
@@ -366,7 +366,7 @@ export const setFilter = async (options: {
             });
             menu.addItem({
                 icon,
-                label: `<span class="b3-chip b3-chip--middle" data-name="${option.name}" data-color="${option.color}" style="margin:3px 0;background-color:var(--b3-font-background${option.color});color:var(--b3-font-color${option.color})">
+                label: `<span class="b3-chip b3-chip--middle" data-name="${option.name}" data-color="${option.color}" style="max-width: 178px;margin:3px 0;background-color:var(--b3-font-background${option.color});color:var(--b3-font-color${option.color})">
     <span class="fn__ellipsis">${option.name}</span>
 </span>`,
                 bind(element) {

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

@@ -28,10 +28,11 @@ const filterSelectHTML = (key: string, options: {
             if (!key ||
                 (key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
                     item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
+                const airaLabel = item.desc ? `${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>` : ""
                 html += `<button data-type="addColOptionOrCell" class="b3-menu__item" data-name="${escapeAttr(item.name)}" data-desc="${escapeAttr(item.desc || "")}" draggable="true" data-color="${item.color}">
     <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
-    <div class="fn__flex-1">
-        <span class="b3-chip ariaLabel" data-position="2parentW" aria-label="${escapeAriaLabel(item.name)}<div class='ft__on-surface'>${escapeAriaLabel(item.desc || "")}</div>" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
+    <div class="fn__flex-1 ariaLabel" data-position="2parentW" aria-label="${airaLabel}">
+        <span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
             <span class="fn__ellipsis">${escapeHtml(item.name)}</span>
         </span>
     </div>
@@ -209,18 +210,17 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
     }
     menu.addItem({
         iconHTML: "",
-        type: "readonly",
-        label: `<div>
-    <div class="b3-form__icona fn__block">
-        <input class="b3-text-field b3-form__icona-input" type="text">
-        <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${desc ? escapeAriaLabel(desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
-    </div>
-    <div class="fn__none">
-        <div class="fn__hr"></div>
-        <textarea rows="1" class="b3-text-field fn__block" type="text" data-value="${escapeAttr(desc)}">${desc}</textarea>
-    </div>
-    <div class="fn__hr--small"></div>
-</div>`,
+        type: "empty",
+        label: `<div class="fn__hr"></div>
+<div class="b3-form__icona fn__block">
+    <input class="b3-text-field b3-form__icona-input" type="text">
+    <svg data-position="top" class="b3-form__icona-icon ariaLabel" aria-label="${desc ? escapeAriaLabel(desc) : window.siyuan.languages.addDesc}"><use xlink:href="#iconInfo"></use></svg>
+</div>
+<div class="fn__none">
+    <div class="fn__hr"></div>
+    <textarea rows="1" placeholder="${window.siyuan.languages.addDesc}" class="b3-text-field fn__block" type="text" data-value="${escapeAttr(desc)}">${desc}</textarea>
+</div>
+<div class="fn__hr--small"></div>`,
         bind(element) {
             const inputElement = element.querySelector("input");
             inputElement.addEventListener("keydown", (event: KeyboardEvent) => {
@@ -601,7 +601,7 @@ export const getSelectHTML = (data: IAVTable, cellElements: HTMLElement[], init
     const selected: string[] = [];
     cellValues[0].mSelect?.forEach((item) => {
         selected.push(item.content);
-        selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${escapeAttr(item.content)}" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">${escapeHtml(item.content)}<svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
+        selectedHTML += `<div class="b3-chip b3-chip--middle" data-content="${escapeAttr(item.content)}" style="white-space: nowrap;max-width:100%;background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})"><span class="fn__ellipsis">${escapeHtml(item.content)}</span><svg class="b3-chip__close" data-type="removeCellOption"><use xlink:href="#iconCloseRound"></use></svg></div>`;
     });
 
     return `<div class="b3-menu__items">

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

@@ -212,7 +212,7 @@ export const getViewHTML = (data: IAV) => {
         </div>
         <div class="fn__none">
             <div class="fn__hr"></div>
-            <textarea style="margin-left: 22px;width: calc(100% - 22px);" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(view.desc)}">${view.desc}</textarea>
+            <textarea style="margin-left: 22px;width: calc(100% - 22px);" placeholder="${window.siyuan.languages.addDesc}" rows="1" data-type="desc" class="b3-text-field fn__size200" type="text" data-value="${escapeAttr(view.desc)}">${view.desc}</textarea>
         </div>
     </div>
 </button>