툴팁 아이콘으로 쿠폰혜택 안내하는 간편한 방법
원하는 위치에 툴팁 아이콘을 적용하여, 쿠폰혜택과 같은 이벤트 안내를 쉽게 할 수 있습니다.
1. 스마트디자인 편집창을 열어, HTML/CSS 코드 추가하기
레이아웃 상단의 [회원가입] 버튼 위치에 예시로 적용해보겠습니다.
1) 툴팁을 적용할 위치의 HTML 파일을 열어 아래와 같이 파란색 코드를 추가해주세요.
① 감싸고 있는 회원가입 a 태그에 tooltipTarget 클래스를 붙인다.
② 툴팁 아이콘 img 태그에 icoTooltip 클래스를 붙인다.
<div module="Layout_statelogoff">
<!--@css(/css/module/layout/statelogoff.css)-->
<a href="/member/login.html" class="log">로그인</a>
<a href="/member/join.html" class="tooltipTarget">회원가입<img src="/img/ico_tooltip.png" alt="회원가입 시 1000포인트 10%쿠폰 제공" class="icoTooltip" /></a>
<a href="/order/basket.html">장바구니 <span class="count {$basket_count_display|display} {$basket_count_display_class}"><span class="{$basket_count_class}">{$basket_count}</span></span></a>
<a href="/myshop/order/list.html">주문조회</a>
<a href="/myshop/index.html">마이쇼핑</a>
<a href="/board/index.html">게시판</a>
</div>
2) 해당 페이지의 관련 CSS 파일을 열어 최하단에 파란색 코드를 추가해주세요.
.xans-layout-statelogoff { float:right; height:45px; line-height:45px; }
.xans-layout-statelogoff > a { padding:0 4px 0 10px; color:#757575; font-size:12px; background:url("http://img.echosting.cafe24.com/skin/base_ko_KR/layout/ico_util1.gif") no-repeat 0 1px; }
.xans-layout-statelogoff .log { background:none; }
.xans-layout-statelogoff > a .count,
.xans-layout-statelogoff > a .count span { position:relative; display:inline-block; background:url("http://img.echosting.cafe24.com/skin/base_ko_KR/layout/bg_new_count.png") no-repeat; }
.xans-layout-statelogoff > a .count { left:-5px; top:-1px; margin:0 -5px 0 3px; padding:0 0 0 7px; vertical-align:middle; background-position:0 0; }
.xans-layout-statelogoff > a .count span { height:14px; padding:1px 7px 1px 0; font-size:11px; font-weight:bold; color:#fff; line-height:14px; vertical-align:top; background-position:right -26px; }
.tooltipTarget { position:relative; }
.icoTooltip { z-index:1; position:absolute; top:100%; left:-10px; }
툴팁 아이콘이 적용되었습니다.
2. 툴팁 아이콘 위 아래로 움직이는 효과 넣어주기
간단한 자바스크립트 소스를 추가하면, 애니메이션 효과도 불 수 있습니다.
/layout/basic/js/basic.js 파일을 열어 최하단에 파란색 코드를 추가해주세요.
function iconUp() {
$('.icoTooltip').animate({top:'100%'}, 500, function(){
iconDown();
});
}
function iconDown() {
$('.icoTooltip').animate({top:'70%'}, 500, function(){
iconUp();
});
}
$(document).ready(function(){
iconUp();
});
툴팁 아이콘에 움직이는 효과가 적용되었습니다.
