커스텀 툴팁, tooltip > jquery

본문 바로가기

jquery

커스텀 툴팁, tooltip

작성일 19-12-11 10:37

페이지 정보

작성자서방님 조회 47회 댓글 0건

본문

<script type="text/javascript">
/********************************************************************************
* 커스텀 툴팁 (서방님, 2019-12-11 10:35)
********************************************************************************/
$(function(){
	var title_;
	var imgTag;

	$(".tooltip").hover(function(e) { // hover 시 : mouseEnter
		title_ = $(this).attr("title"); // title을 변수에 저장
		$(this).attr("title",""); // title 속성 삭제 (기본 툴팁 기능 방지)

		$("body").append("<div id='tip'></div>"); // div#tip 생성

		$("#tip").css("max-width","300px");
		$("#tip").text(title_);

		var pageX = $(this).offset().left;
		var pageY = $(this).offset().top - $("#tip").innerHeight();
		$("#tip").css({left : pageX + "px", top : pageY + "px"}).fadeIn(500);
	}, function() { // hover 시 : mouseLeave
		$(this).attr("title", title_); // title 속성 반환
		$("#tip").remove(); // div#tip 삭제
	});
});
</script>


<style type="text/css">
#tip {position:absolute; color:#fff; padding:5px; display:none; background:#450e4c; border-radius:5px;}
</style>


<div>
	<p>
		Lorem Ipsum is simply dummy text of the printing and typesetting industry.
		Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
		<a href="#" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry." class="tooltip">specimen book.</a>
		It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
	</p>
	<p>
		Contrary to popular belief,	Lorem Ipsum
		is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
	</p>
</div>

댓글목록

등록된 댓글이 없습니다.

게시물 검색
Copyright © 서방님.kr All rights reserved.
PC 버전으로 보기