diff --git a/frontend/src/views/mobile/MobileSellerListingCreateView.css b/frontend/src/views/mobile/MobileSellerListingCreateView.css index e418296..3afec6e 100644 --- a/frontend/src/views/mobile/MobileSellerListingCreateView.css +++ b/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; diff --git a/frontend/src/views/mobile/MobileSellerListingCreateView.vue b/frontend/src/views/mobile/MobileSellerListingCreateView.vue index c46ca36..f6dfe03 100644 --- a/frontend/src/views/mobile/MobileSellerListingCreateView.vue +++ b/frontend/src/views/mobile/MobileSellerListingCreateView.vue @@ -690,7 +690,14 @@ function readError(error: unknown, fallback: string) {