jquery ui를 사용한 tooltip 텍스트 꾸미기

프로그래밍/자바스크립트 2018. 4. 1. 18:20
반응형

태그의 title 속성으로 툴팁을 만들 수 있습니다. 하지만 일반 텍스트 밖에 사용할 수 가 없습니다. 툴팁 내용에 html 태그를 사용하면 그대로 보여져 버립니다.

 

jquery UI 의 tooltip 위젯을 사용하면 툴팁의 모양을 예쁘게 꾸밀 수 있습니다. 사용하는 방법을 알아 봅시다.



1. 가장 기본적인 사용법입니다.


jquery-ui 를 사용하기 위해서는 jquery 가 필요 합니다. 아래 샘플 코드 에서는 jquery-ui 1.12.1 버전을 jquery 1.12.4 버전을 사용하고 있습니다. 또한 jquery-ui의 기본적인 모양을 지정하는 jquery-ui.css 파일도 사용합니다.

 

$(function() {
    $(document).tooltip();
});

 

위 코드는 문서내의 모든 title 속성에 기본 tooltip 을 적용합니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
    $(document).tooltip();
});
</script>
<style>
</style>
</head>

 

<body>
<a href="https://pentode.tistory.com/" title="쉬고 싶은 개발자<br/>프로그래밍 팁">쉬고 싶은 개발자</a>
</body>
</html>

적용전 툴팁 모양

적용전 툴팁모양


 

적용 후 툴팁 모양

 

적용후 툴팁 모양


 

 

jquery-ui tootip을 적용한 모양입니다. 적용전과는 테두리와 위치가 달라졌습니다. 기본으로는 툴팁내의 html 태그를 그냥 보여집니다.

 

- 특정 엘리먼트에만 적용을 하려면 엘리먼트의 id 또는 class 속성을 사용합니다. 실제는 jquery 셀렉터로 선택할 수 는 엘리먼트면 뭐든지 가능합니다. 아래 코드는 id가 show-tooltip 인 엘리먼트의 title 속성에 적용합니다.

 

$(function() {
    $("#show-tooltip").tooltip();
});

 

 

2. 툴팁에 html 태그 사용하기


툴팁의 옵션중 content에 지정된 내용을 html이 적이 됩니다. 아래 코드는 title 속성을 컨텐트로 사용하여 title 속성내의 html 태그가 동작 되도록 하였습니다.

 

$(function() {
    $(document).tooltip({
       content: function() {
        return $(this).prop('title');
       }
    });
});

 

 

툴팁에 html 사용 예


 


3. 스타일 바꾸기


툴팁의 스타일을 바꿀 수 있습니다. jquery-ui 기본 클래스가 ui-tooltip 입니다. 이 클래스의 내용을 오버라이드 하면 모양을 바꿀 수 있습니다.

 

.ui-tooltip {
  padding: 10px 20px;
  color: blue;
  border-radius: 20px;
  box-shadow: 0 0 7px green;
}

 

툴팁 스타일 지정


 


4. jquery-ui 툴팁의 다른 옵션들을 알아 봅시다.

 

- 툴팁은 기본적으로 title 속성의 값을 사용합니다. items 옵션을 사용하여 이것을 변경할 수 있습니다. 아래 코드는 img 태그의 alt 속성을 툴팁에 사용합니다.

 

$(document).tooltip({
  items: "img[alt]"
});

 

- 툴팁이 마우스를 따라 움직일 수 있게 하는 track 옵션입니다.

 

$(document).tooltip({
  track: true
});


- 그외에 툴팁에 애니메이션을 줄 수 있는 show, 다른 모양의 스타일을 지정할 수 있는 tooltipClass, 위치를 지정할 수 있는 position 옵션 등이 있습니다.

반응형

댓글을 달아 주세요