쇼핑몰센터스마트디자인

나머지주소 입력박스를 출력해주는 {$form.addr2}변수에 아래와 같이 도움말 소스를 추가합니다.

<div class="ec-base-tooltip">
    <span id="{$name_contents}" class="eTip">{$form.addr2}</span>
    <div class="tooltip">
        <div class="content">
             나머지주소가 있는경우, <br>나머지주소를 모두 입력하세요.
             <button type="button" class="close eClose">닫기</button>
         </div>
     </div>
 </div>

2. /css/module/member/join.css에 도움말 관련 CSS를 추가합니다.

주문서작성 페이지에 적용시 아래 CSS를 참고하세요.

3. /js/module/member/join.js에 도움말을 띄우는 자바스크립트 코드를 추가합니다.

주문서작성 페이지 적용할 경우에는 /js/module/order/order_form.js 에 추가합니다.

// 도움말 툴팁
$('body').delegate('.ec-base-tooltip .eTip', 'click', function(e){
    var findTarget = $($(this).siblings('.tooltip'));
    var findTooltip = $('.tooltip');
    $('.ec-base-tooltip').removeClass('show');
    $(this).parents('.ec-base-tooltip:first').addClass('show');
    findTooltip.hide();
    findTarget.show();
    e.preventDefault();
});
$('body').delegate('.ec-base-tooltip .eClose', 'click', function(e){
    var findTarget = $(this).parents('.tooltip:first');
    $('.ec-base-tooltip').removeClass('show');
    findTarget.hide();
    e.preventDefault();
});