태그의 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'); } }); }); |
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 옵션 등이 있습니다.
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| AX5UI - GRID 1 (기본 사용법) (2) | 2018.04.03 |
|---|---|
| AX5UI - 소개(JavaScript UI Component) (0) | 2018.04.03 |
| jQuery Validation Plugin 사용하기 (0) | 2018.04.03 |
| jQuery로 요소의 값처리 및 상태변경 (0) | 2018.04.03 |
| jQuery 선택자 사용하기 (4) | 2018.04.03 |