웹접근성 툴팁 같은 레이어팝업

by hohoya33

HTML

<div class="tooltip">
    <strong>알뜰상품</strong>
    <button class="tooltip-btn" aria-expanded="false" aria-controls="tooltip-cont"><span class="codr_ico_detail"><span class="blind">알뜰상품</span></span></button>

<div id="tooltip-cont" class="tooltip-content" role="dialog" aria-labelledby="tooltip-cont" aria-hidden="true" tabindex="0">
    


      <div class="codr_tooltip_head">
				<strong id="tooltip-tit" class="codr_tooltip_tit">알뜰상품</strong>
        <button type="button" class="tooltip-close"><span class="blind">알뜰상품 레이어 닫기</span></button>
			</div>


<div class="codr_tooltip_area">
				<ul class="codr_info_lst" role="presentation">
					<li>이마트몰 <span class="notranslate">NE.O</span>에서만 판매되는 한정수량 파격가 알뜰상품입니다. 한정수량 재고소진 시 가격이 달라질 수 있으니 결제 시 다시 확인해주시기 바랍니다.</li>
				</ul>
				<ul class="codr_info_lst ty_footnote" role="presentation">
					<li>※ 유통기한이 다소 짧을 수 있습니다.</li>
				</ul>
			</div>

      
    </div>
  </div>

CSS

:focus{outline:4px solid #FF0000}
.blind{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;line-height:0;white-space:normal;word-wrap:break-word;word-break:break-all;clip:rect(0,0,0,0)}
.blind:before{display:block;width:0;height:0;font-size:0;content:'\00a0'}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal}
button{border:0}



.tooltip.on .tooltip-content{display:block;}
.tooltip-content{display:none}

.tooltip-btn{display:inline-block;position:relative;vertical-align:middle;line-height:17px}
.codr_btn_tooltip{display:inline-block;position:relative;width:18px;height:18px;vertical-align:top}




.codr_ico_detail{display:inline-block;overflow:hidden;width:auto;height:1px;background:url(http://static.ssgcdn.com/ui/ssg/img/order/sp_codr_v2.png) no-repeat;line-height:999px;vertical-align:top}

.codr_ico_detail{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background-position:0 -90px}


.codr_tooltip_head{position:relative;margin-bottom:19px;padding:0 35px 14px 0;border-bottom:3px solid #222;word-break:break-word;word-wrap:break-word}
.codr_tooltip_tit{font-size:18px;font-weight:normal;color:#222;line-height:1.15}


.tooltip-close{display:block;overflow:hidden;position:absolute;top:0;right:0;display:block;width:20px;height:20px;background:url(http://static.ssgcdn.com/ui/ssg/img/product/v2/[email protected]) no-repeat 50% 50%;background-size: 20px 20px;}

.codr_info_lst{margin-top:10px;padding:0;}
.codr_info_lst li{position:relative;margin-top:10px;font-size:14px;color:#777;line-height:1.58;word-break:break-word;word-wrap:break-word}
.codr_info_lst li:first-child{margin-top:0}
.codr_info_lst.ty_footnote{margin-top:20px;padding-top:20px;border-top:1px solid #e0e0e0}
ul li{list-style:none}


.tooltip-content{position:absolute;left:30px;z-index:10;width:300px;margin-top:10px;padding:29px 29px 22px 29px;border:1px solid...

JavaScript

var welTooltipOpen = $('.tooltip-btn');


welTooltipOpen.on('click', function(){
	var welTarget = $(this).parent();
  if(welTarget.hasClass('on')) {
  	hideTooltip(welTarget);
  } else {
  	showTooltip(welTarget);
  }
});

function showTooltip(welTarget) {
	welTarget.addClass('on');
  welTarget.find('.tooltip-btn').attr('aria-expanded', true);
	welTarget.find('.tooltip-content').attr('aria-hidden', false).focus();
  
  welTarget.find('.tooltip-close').one('click', function(){
  	hideTooltip(welTarget);
  });
  
  welTarget.on('keydown', function(e){
  	// ESC
    if (e.keyCode === 27) {
			hideTooltip(welTarget);
    }
  });
}

function hideTooltip(welTarget) {
	welTarget.removeClass('on');
  welTarget.find('.tooltip-btn').attr('aria-expanded', false);
	welTarget.find('.tooltip-content').attr('aria-hidden', true);
	welTarget.find('.tooltip-btn').focus();
  welTarget.off('keydown');
}