优化左侧悬浮显示提示

frontend/src/views/mobile/MobileSellerListingCreateView.css

@@ -69,7 +69,7 @@
   margin-bottom: 8px;
   border-radius: 8px;
   background: #f8fafc;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .publish-field :deep(.van-field__label) {
@@ -84,6 +84,80 @@
   font-size: 14px;
 }
 
+.hint-label,
+.backend-hint-target.has-hint,
+.upload-title.has-hint {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  line-height: 1.35;
+  cursor: help;
+  outline: none;
+}
+
+.hint-label::before,
+.backend-hint-target.has-hint::before,
+.upload-title.has-hint::before,
+.hint-label::after,
+.backend-hint-target.has-hint::after,
+.upload-title.has-hint::after {
+  position: absolute;
+  z-index: 20;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.16s ease, visibility 0.16s ease;
+}
+
+.hint-label::before,
+.backend-hint-target.has-hint::before,
+.upload-title.has-hint::before {
+  content: "";
+  top: 50%;
+  left: calc(100% + 2px);
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-right-color: rgba(32, 36, 42, 0.96);
+}
+
+.hint-label::after,
+.backend-hint-target.has-hint::after,
+.upload-title.has-hint::after {
+  content: attr(data-hint);
+  top: 50%;
+  left: calc(100% + 14px);
+  width: min(242px, calc(100vw - 136px));
+  max-height: 156px;
+  overflow: auto;
+  transform: translateY(-50%);
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(32, 36, 42, 0.96);
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.45;
+  white-space: normal;
+}
+
+.hint-label:hover::before,
+.hint-label:focus-visible::before,
+.backend-hint-target.has-hint:hover::before,
+.backend-hint-target.has-hint:focus-visible::before,
+.upload-title.has-hint:hover::before,
+.upload-title.has-hint:focus-visible::before,
+.hint-label:hover::after,
+.hint-label:focus-visible::after,
+.backend-hint-target.has-hint:hover::after,
+.backend-hint-target.has-hint:focus-visible::after,
+.upload-title.has-hint:hover::after,
+.upload-title.has-hint:focus-visible::after {
+  opacity: 1;
+  visibility: visible;
+}
+
 .radio-group,
 .multi-chip-group {
   display: flex;