접근성 툴팁

by hohoya33

HTML

<script src="http://static.ssgcdn.com/ui/ssg/js/ui/ui.tooltip.js"></script>
<h3>기본 라벨 툴팁</h3>

<div class="tooltip_wrap">
  <button class="tooltip" aria-labelledby="cart-label">
    <span class="ico_cart"></span>
  </button>
  <div class="tooltip_cont" role="tooltip" id="cart-label">장바구니 담기</div>
</div>

<br>
<br>
<hr>

<h3>보조 설명 툴팁</h3>

<div class="tooltip_wrap">
  <button class="tooltip" aria-describedby="ad-desc">광고</button>
  <div class="tooltip_cont" role="tooltip" id="ad-desc">
    해피바이러스의 광고구좌를 구매한<br>상품으로 입찰가 순으로 전시됩니다.
  </div>
</div>

<br>
<br>
<hr>

CSS

:focus{outline:4px solid #FF0000}
body{color:#fff;text-align:center;background:#282c34}
p{margin-top:0;padding-left:20px;text-align:left;}
h3{margin-bottom:0;padding-left:20px;text-align:left;color:#13daec;}
button, a{
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  padding: 0 16px;
  text-transform: uppercase;
  vertical-align: middle;
  font-size: 14px;
  text-decoration: none;
  color: #222;
  background-color: #fff;
  text-align: center;
  letter-spacing: .5px;
  cursor: pointer;
  margin-bottom: 10px;
}


.ico_cart{display:inline-block;overflow:hidden;background:url(http://static.ssgcdn.com/ui/ssg/img/common_layout/sp_cmh_2x.png) no-repeat;background-size:150px auto;width:31px;height:22px;background-position:0 0}

.tooltip_wrap{display:inline-block;}
.tooltip_cont{display:none;}
.tooltip_wrap.on .tooltip_cont{display:block;}

JavaScript

$('.tooltip_wrap').on('focusin mouseenter', function(){
		var welTarget = $(this);
    welTarget.addClass('on');	
}).on('focusout mouseleave', function(){
		var welTarget = $(this);
    welTarget.removeClass('on');
});