툴팁으로 이미지 나오게 하기
1. 정의
- 툴팁으로 텍스트가 아닌 이미지를 나오게 한다
- data-photo 라는 변수를 선언하여 img url를 불러온다
2. 구현
12345678910111213141516171819202122232425262728<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <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> $(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 |
리딩리드