Dev JS Blog

[jQuery] jQuery tooltip 본문

옛날 창고/개발

[jQuery] jQuery tooltip

Dev JS 2019. 1. 30. 10:32
728x90

jQuery tooltip 사용법




jQuery 와 Bootstrap 를 활용한 tooltip 을 만들어보겠습니다.

jQuery 와 Bootstrap 을 이용하려면 당연히 jQuery와 Bootstrap이 있어야겠죠?

<head> 부분에 넣어줍니다.

1
2
3
4
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
cs


일반적인 툴팁부터 보겠습니다.

일반적으로 태그안에 title에 내용을 넣어주고 마우스 오버 하면 툴팁이 나옵니다.


1
<input type="text" title="일반적인 tooltip">
cs


일반적인 툴팁도 나쁘지는 않지만 조금 다르게 하고 싶습니다.

jQuery를 이용해보겠습니다.

이번엔 버튼에 tooltip을 해보겠습니다.



1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
    $(document).ready(function(){
        //tooltip 생성
        $(".tooltip_event").tooltip();
    });
</script>
 
<button class="tooltip_event" title="버튼 tooltip 입니다.">
    버튼 툴팁
</button>
 
cs


tooltip을 원하는 class나 아이디를 넣고 tooltip() 함수를 실행해주시면 됩니다.


어떤가요? 아까 툴팁이랑은 확실히 다르죠?

여기서 jQuery만 이용했다면 저렇게 까맣게 나오지않고 하얀 바탕의 툴팁이 나옵니다.

현재는 Bootstrap에서 검은색 말풍선으로 스타일을 주고 있는 상태입니다.


그다음은 툴팁을 오른쪽으로 하고싶다면?

이번엔 span 태그에 넣어보겠습니다.



1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
    $(document).ready(function(){
        //tooltip 생성
        $(".tooltip_event").tooltip();
    });
</script>
 
<span class="tooltip_event" title="오른쪽 tooltip 입니다." data-placement="right">
    툴팁 오른쪽
</span>
cs


data-placement 를 원하는 방향으로 top, bottom, right, left 를 주시면 됩니다.


그렇다면 마지막으로 자신이 원하는대로 커스텀 하고 싶다면?


기본적으로 툴팁의 템플릿 구성은 이렇게 되어있습니다.


1
2
3
4
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>
cs


template 태그를 변경해주는 것이지요

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
    $(document).ready(function(){
        //tooltip custom tag
        var tooltipHtml = [];
        
        tooltipHtml.push("<div class='tooltip'>");
        tooltipHtml.push("    <div class='tooltip-arrow'></div>");
        tooltipHtml.push("    <h3> Tooltip Title</h3>");
        tooltipHtml.push("    <div class='tooltip-head'></div>");
        tooltipHtml.push("    <div class='tooltip-inner'></div>");
        tooltipHtml.push("</div>");
        
        //커스텀 Tooltip
        $(".tooltip_custom").tooltip({
            template: tooltipHtml.join("")
        });
    });
</script>
 
<span class="tooltip_custom" title="custom tooltip 입니다.">
    툴팁 커스텀
</span>
cs


tooltip inner 부분에 background 스타일을 주면 툴팁의 색이 변경되니 원하는 스타일을 주어서 변경해보세요


참고 사이트를 가면 다양한 옵션과 방법이 있으니 참고 바랍니다.


jQuery UI

https://jqueryui.com/tooltip/


Bootstrap Tooltips

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php


728x90
저작자표시

'옛날 창고 > 개발' 카테고리의 다른 글

[JAVA] 두 리스트 비교 하기  (0) 2019.04.10
[Oracle] 오라클 날짜 포멧  (2) 2019.01.31
[JAVA] 자바 파일 복사  (2) 2019.01.05
[java] 형변환 에러  (0) 2018.06.26
[HTML] 체크박스 & 라디오버튼 컨트롤하기  (2) 2018.04.28
'옛날 창고/개발' Related Articles more
Comments