맨위로가기
 

SBUx

닫기

Tooltip

도움말을 주는 툴팁 컴포넌트 입니다. 태그 형태가 아닌 속성 형태 입니다.

기본 사항

사항 설명 비고
HTML 태그 형태 태그 형태 없음  
필수 속성 tooltip  
적용 가능한 SBUx 내 컴포넌트

input , textarea , listbox , select , checkbox , radio ,

 
예시) tooltip 컴포넌트

<sbux-input id="idxInput_text" name="input_text" uitype="text"

                 tooltip="쉼표로 구분하여 회사를 입력하세요"></sbux-input>



<sbux-input id="idxInput_pw" name="input_pw" uitype="password"

                 tooltip="8자리 숫자와 문자가 혼용 된 패스워드를 입력하세요">

</sbux-input>



<sbux-input id="idxInput_sch" name="input_sch" uitype="search"

               tooltip="회사명 검색시 '주식회사'와 같은 용어는 삭제하시기 바랍니다">

</sbux-input>



<sbux-textarea id="idxTextarea_norm" name="textarea_norm" uitype="normal"

                 tooltip="쉼표로 구분하여 회사를 입력하세요"></sbux-textarea>



<sbux-listbox id="idxListbox_single" name="listbox_single" uitype="single"

                  tooltip="좋아하는 색상을 선택하세요">

   <option-item value="red" style="color:red" >빨강</option-item>

   <option-item value="orange" style="color:orange" >주황</option-item>

</sbux-listbox>



<sbux-select id="idxSelect_single" name="select_single" uitype="single"

                  tooltip="좋아하는 색상을 선택하세요">

   <option-item value="red" style="color:red" >빨강</option-item>

   <option-item value="orange" style="color:orange" >주황</option-item>

</sbux-select>



<sbux-checkbox id="idxChkbox_norm" name="chkbox_norm" uitype="normal"

                      text="빨강" value="red"

                      tooltip="색상을 선택하세요"></sbux-checkbox>



<sbux-radio id="idxRdo_norm" name="rdo_norm" uitype="normal"

                      text="빨강" value="red"

                      tooltip="색상을 선택하세요"></sbux-radio>



<sbux-button id="idxBtn_norm" name="btn_norm" uitype="normal"

                   text="버튼"

                   tooltip="색상을 선택하세요"></sbux-button>


<sbux-label id="idxLbl_norm" name="lbl_norm" uitype="normal"

                   text="색상명"

                   tooltip="색상을 선택하세요"></sbux-label>

(* tooltip 와 popover 를 동시에 사용할 수는 없습니다)