hover 컨텐츠

<a href="#" class="btn_tooltip" onclick="toggleActive(this); return false;">마우스오버</a>

<div class="tbl_tooltip">
	<div class="inner" style="width: 240px">
	마우스오버시 보여지는 컨텐츠
	</div>
</div>

 

.btn_tooltip {position: relative; display: block;}
.tbl_tooltip {position: absolute; display: none; width: 0; height: 0; bottom: 0; left: 5px;}
.tbl_tooltip .inner {position: relative; padding-top: 8px;}
.tbl_tooltip .inner::before {position: absolute; display: block; width: 13px; height: 9px; top: 0; left: 20px; background: url(../images/front/ico/tbl_tooltip_arr.png) no-repeat 0 0; content: ''; z-index: 10;}
.tbl_tooltip .inner .txt {position: relative; padding: 8px 20px; background-color: #fafafa; border: 1px solid #dddddd; border-radius: 10px; z-index: 5;}


.btn_tooltip:hover + .tbl_tooltip,
.btn_tooltip.active + .tbl_tooltip {display: block;}
.btn_tooltip.active + .tbl_tooltip {left: auto; right: 5px;}
.btn_tooltip.active + .tbl_tooltip .inner {float: right;}
.btn_tooltip.active + .tbl_tooltip .inner::before {left: auto; right: 20px;}

 

function toggleActive(i) {
    var _this = $(i);

    (_this.hasClass('active')) ? _this.removeClass('active') : _this.addClass('active');
}