[jQueryUI] 툴팁으로 이미지 나오게 하기

Front-End/jQueryUI 2017. 1. 25. 13:59

툴팁으로 이미지 나오게 하기

1. 정의

- 툴팁으로 텍스트가 아닌 이미지를 나오게 한다

- data-photo 라는 변수를 선언하여 img url를 불러온다

2. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css"/> <style> </style> </head> <ul id="list"> <li><a href="#" data-photo="img1">Flower</a></li> <li><a href="#" data-photo="img2">Light</a></li> </ul> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('#list').tooltip({ items:'[data-photo]', content:function(){ var photo = $(this).data('photo'); return '<img src="'+photo+'.jpg"/>'; } }); }); </script>

'Front-End > jQueryUI' 카테고리의 다른 글

[jQueryUI] 자동완성기능 - autoComplete (0)	2017.01.31
[jQueryUI] 간편 다단계 메뉴 구현 (0)	2017.01.25
[jQueryUI] 간편한 툴팁구현 (0)	2017.01.25
[jQueryUI] AJAX를 이용한 비동기적 대화상자 (0)	2017.01.23
[jQueyUI] 간단한 대화상자 구현 (0)	2017.01.19

리딩리드

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31