물건정보 툴팁 수정

This commit is contained in:
김창수 2024-10-16 10:28:51 +09:00
parent 363bdaf81f
commit 89d1e28a06
4 changed files with 33 additions and 14 deletions

View File

@ -47,7 +47,7 @@ export default function NewProductPage(){
{/* <FindAddressPop/> */} {/* <FindAddressPop/> */}
{/* 설계의뢰 불러오기 팝업 */} {/* 설계의뢰 불러오기 팝업 */}
<DesignRequestPop/> {/* <DesignRequestPop/> */}
</div> </div>
) )
} }

View File

@ -192,7 +192,9 @@ export default function NewProductTable(){
<input type="checkbox" id="ch02" /> <input type="checkbox" id="ch02" />
<label htmlFor="ch02">塩害地域用アイテムの使用</label> <label htmlFor="ch02">塩害地域用アイテムの使用</label>
</div> </div>
<div className="tooltips"></div> <div className="tooltips">
<span>塩害地域の定義は各メーカーの設置マニュアルをご確認ください</span>
</div>
</div> </div>
</td> </td>
</tr> </tr>

View File

@ -102,7 +102,9 @@ export default function ProductInfoTable(){
<div className="title"> <div className="title">
一次販売店名/ID <span className="important">*</span> 一次販売店名/ID <span className="important">*</span>
</div> </div>
<div className="tooltips"></div> <div className="tooltips">
<span>販売代理店または販売代理店IDを1文字以上入力してください</span>
</div>
</div> </div>
</th> </th>
<td> <td>
@ -125,7 +127,9 @@ export default function ProductInfoTable(){
<div className="title"> <div className="title">
二次販売店名/ID <span className="important">*</span> 二次販売店名/ID <span className="important">*</span>
</div> </div>
<div className="tooltips"></div> <div className="tooltips">
<span>販売代理店または販売代理店IDを1文字以上入力してください</span>
</div>
</div> </div>
</th> </th>
<td> <td>
@ -225,7 +229,7 @@ export default function ProductInfoTable(){
<input type="checkbox" id="ch02" /> <input type="checkbox" id="ch02" />
<label htmlFor="ch02">塩害地域用アイテムの使用</label> <label htmlFor="ch02">塩害地域用アイテムの使用</label>
</div> </div>
<div className="tooltips"></div> <div className="tooltips"><span>塩害地域の定義は各メーカーの設置マニュアルをご確認ください</span></div>
</div> </div>
</td> </td>
</tr> </tr>

View File

@ -115,24 +115,37 @@ table{
cursor: pointer; cursor: pointer;
span{ span{
position: absolute; position: absolute;
top: -25px; top: 50%;
left: -10px; transform: translateY(-50%);
padding: 3px 7px; left: 25px;
font-size: 11px; padding: 11px 7px;
font-size: 12px;
font-weight: 400; font-weight: 400;
color: #344356; color: #45576F;
background-color: #F7F9FA; background-color: #fff;
border: 1px solid #ECF0F4; border: 2px solid #45576F;
border-radius: 30px; border-radius: 2px;
white-space: nowrap; white-space: nowrap;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
z-index: 99; z-index: 99;
transition: all .15s ease-in-out; transition: all .15s ease-in-out;
&::before{
content: '';
position: absolute;
top: 50%;
left: -6px;
transform: translateY(-50%) rotate(45deg);
width: 9px;
height: 9px;
border: 2px solid #45576F;
background-color: #fff;
border-top: none;
border-right: none;
}
} }
&:hover{ &:hover{
span{ span{
top: -30px;
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }