물건정보 툴팁 수정

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/> */}
{/* 설계의뢰 불러오기 팝업 */}
<DesignRequestPop/>
{/* <DesignRequestPop/> */}
</div>
)
}

View File

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

View File

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

View File

@ -115,24 +115,37 @@ table{
cursor: pointer;
span{
position: absolute;
top: -25px;
left: -10px;
padding: 3px 7px;
font-size: 11px;
top: 50%;
transform: translateY(-50%);
left: 25px;
padding: 11px 7px;
font-size: 12px;
font-weight: 400;
color: #344356;
background-color: #F7F9FA;
border: 1px solid #ECF0F4;
border-radius: 30px;
color: #45576F;
background-color: #fff;
border: 2px solid #45576F;
border-radius: 2px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
z-index: 99;
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{
span{
top: -30px;
opacity: 1;
visibility: visible;
}