TysonWorld

데이터 text 길이가 너무 길어서,  

표에서 ... (점점점)  으로 보이게 하고, 데이터 값을 툴팁으로 띄어주고 싶어서

툴팁으로 만들었다.

텍스트 생략 방법은 아래 참고

https://tyson.tistory.com/45?category=859198 

툴팁 만들때, 먼저, jquery, bootstrap를 추가해준다.

<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">

그리고, 자바스크립트에서 생성해주고,

클래스로 불러와서, 쓰면된다.

<script type="text/javascript">
    $(document).ready(function(){
        //tooltip 생성
        $(".tooltip_event").tooltip();
    });
</script>
 
<button class="tooltip_event" title="버튼 tooltip 입니다.">
    버튼 툴팁
</button>

툴립에 뜨길 원하는 텍스트는 title안에 적어주면 되고,

클래스에 tooltip_event를 추가해주면 된다.

참고, 블로그 :  https://allmana.tistory.com/96

https://kouzie.github.io/html/HTML-CSS-%ED%88%B4%ED%8C%81/#%ED%88%B4%ED%8C%81tooltip