[ 자바스크립트 ] 태그의 title 속성

최종 수정일 : 2015년 9월 24일

title 속성 : 해당 태그 위에 마우스 포인터가 올라갔을 때 나타나는 말풍선

이곳에 마우스 포인터를 올려보시오~*

---

1. title 속성에 빈칸 삽입하기

아래의 "desterday"라는 단어 위로, 마우스 포인터를 올려보면 알 수 있듯이,
title에 넣어준 빈칸들은 모두 화면에 나타난다.

desterday

<p id="pTag"></p>
<pre id="preTag"></pre>

 
<abbr id="abbrTag" title="   the day before yesterday   ">desterday</abbr> <br />

<button onclick="get_value_of_titleAttr()"> 클릭하세요 </button>

<p id="pTag"></p>
<pre id="preTag"></pre>


<script type="text/javascript">

function get_value_of_titleAttr () { 

	 var tag = document.getElementById( "abbrTag" ); 
	 var title_attribute = tag.title; 

	 document.getElementById(  "pTag"  ).innerHTML = title_attribute; 
	 document.getElementById( "preTag" ).innerHTML = title_attribute; 
}

</script>
 

---

2. title 속성에 긴 내용 삽입하기

자바스크립트를 이용하면, 아래처럼 한 줄 이상의 내용을 넣을 수 있다.
아래의 사이트 주소 위로 마우스 포인터를 올려보시오. ^^

www.tistory.com

 
<a id="A_tag" href="http://www.tistory.com/">www.tistory.com</a> 


<script type="text/javascript">

var tag = document.getElementById( "A_tag" ); 

      tag.title = " 기존 가입자에게서 \n 초대장을 받으면 \n 가입할 수 있습니다. "; 

</script>
 

자바스크립트에서는, "\n"이라는 문자가 <br>태그의 역할을 한다.

---

3. title 속성의 내용 바꾸기

아래의 두 버튼을 번갈아가며 클릭하면서,
스누피 그림의 말풍선 내용이 어떻게 바뀌는지 살펴보기 바란다.

 
<img id="imgTag" src="snoopy.png" alt="우드스탁을 안고 있는 스누피" title="스누피와 우드스탁" /> 

<button onclick="change_value_of_title()"> title 바꾸기 </button>

<button onclick="set_original_value()"> 원래대로 </button>


<script type="text/javascript">

var tag = document.getElementById( "imgTag" ); 
var originalValue = tag.title; // title 속성에 원래 들어있던 내용을 저장해놓기 


function change_value_of_title () { 	 tag.title = "만인에게 사랑받는 스누피"; 	 } 

function set_original_value () { 	 tag.title = originalValue; 	 } 

</script>
 

참고로, 인터넷 익스플로러 (ie) 7 이하 버전에서는
img 태그와 area 태그일 때에는, title 속성이 아닌, alt 속성의 내용이 말풍선으로 나타난다.

---

4. title 속성에 스타일 지정하기

원래, title 속성에는 스타일이라는 것을 지정할 수가 없다.

하지만, 다음과 같은 방법을 이용하면 가능하다.

아무 내용도 들어있지 않은 P 태그를 하나 집어넣어서,
그 태그를 말풍선으로 사용하는 방식이다.
따라서, 실질적인 스타일은 바로 그 P 태그에 설정해준 것이다.

아래의 내용은, P 태그에 반드시 필요한 속성들만 설정을 해준 것이다.
<style> 태그를 이용해서, class를 설정해준다면, 더 그럴싸한 말풍선을 만들 수 있을 것이다.
☞ 예문 보기 : [ 자바스크립트 ] 태그의 title 속성 ─ style 설정하기

여기에 마우스 포인터를 올려보시오~*

 
<p id="blankTag" style="position: absolute; left: -100px; top: 0px; background-color: orange; color: gray;"></p>

<div id="divTag" title="테스트용" onmouseover="set_tag_for_titleAttr(event)" onmouseout="return_original_value()">
여기에 마우스 포인터를 올려보시오~* 
</div>


<script type="text/javascript">

var blankTag = document.getElementById( "blankTag" ); 
var tag = document.getElementById( "divTag" ); 
var originalValue = tag.title; 


// 익스플로러의 버전 체크하기  
var version_IE = "0"; 
var ieLower = navigator.userAgent.match( /MSIE [0-9]{1,}/ ); 
if ( ieLower != null ) version_IE = version_IE.toString().replace( "MSIE " , "" ); 


function set_tag_for_titleAttr ( event ) { 

	 event = event || window.event; 
	 var target = event.target || event.srcElement;


	 var positionX = 0; // 마우스 포인터의 좌측 위치 
	 var positionY = 0; // 마우스 포인터의 위쪽 위치 

	 if ( event.pageX ) { 
	      positionX = event.pageX; 
	      positionY = event.pageY; 
	 } 

	 else if ( 0 < version_IE && version_IE < 7 ) { // 인터넷 익스플로러 (ie) 6 이하 버전일 경우 적용될 내용 
		 positionX = event.offsetX; 
		 positionY = event.offsetY; 
	 } 

	 else { // 그외 브라우저용 
		 positionX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
		 positionY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
	 } 


	 var title = target.title; 

	 if (  title != "" ) { // title 속성이 있을 경우 

		 target.removeAttribute( "title" ); 	 // title 속성값을 삭제하기 

		 blankTag.innerHTML = title; 

		 blankTag.style.left = positionX + "px"; 
		 blankTag.style.top = positionY + "px"; 
	 } 
} 


function return_original_value () { 

	 tag.title = originalValue;  // title의 원래 내용을 다시 넣어주기 

	 blankTag.innerHTML = ""; 
	 blankTag.style.left = "-100px"; 
	 blankTag.style.top = "0px"; 
} 

</script>
 

그런데, 앞에서^(↑) 언급했던 이유때문에
인터넷 익스플로러 (ie) 7 이하 버전에서, img 혹은 area 태그일 경우에는
원하지 않은 결과가 발생하기 때문에,
웹페이지를 방문한 사람이 IE 구버전을 사용중일 수도 있으므로,
아래처럼 수정해줄 필요가 있다.

 
function set_tag_for_titleAttr ( event ) { 

	 event = event || window.event; 
	 var target = event.target || event.srcElement;

	 var positionX = 0; 
	 var positionY = 0; 

	 if ( event.pageX ) { 
		 positionX = event.pageX; 
		 positionY = event.pageY; 
	 } 

	 else if ( 0 < version_IE && version_IE < 7 ) { 
		 positionX = event.offsetX; 
		 positionY = event.offsetY; 
	 } 

	 else { 
		 positionX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
		 positionY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
	 } 

	 var title = target.title; 

	 if (  title != "" ) { 

		 var tagName = target.tagName.toLowerCase(); 

		 // IE 7 이하 버전이면서, img 혹은 area 태그일 경우  
		 if ( (0 < version_IE && version_IE < 8) && (tagName == "img" || tagName == "area") ) { 
			 blankTag.innerHTML = "";
		 } 

		 else { 
			 target.removeAttribute( "title" ); 	 // title 속성값을 삭제하기 

			 blankTag.innerHTML = title; 

			 blankTag.style.left = positionX + "px"; 
			 blankTag.style.top = positionY + "px"; 
		 } 
	 } 
} 

이 블로그에서 함께 볼만한 글
1. [ 자바스크립트 ] className 사용법
2. [ 자바스크립트 ] IE 버전 체크용 함수

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요~*. ^^*