툴팁 사용 방법

* 공통

<script src="/static/lib/jquery/jquery-3.2.1.min.js"></script>

<script src="/static/lib/jquery/js.cookie.js"></script>

<script src="/static/lib/magnific-popup/jquery.magnific-popup.js"></script>

<script src="/static/lib/jquery-ui/jquery-ui.min.js"></script>

<script src="/static/lib/perfect-scrollbar/perfect-scrollbar.jquery.min.js"></script>

 

jquery ui를 사용한 tooltip 텍스트 꾸미기 (tistory.com)

jquery ui를 사용한 tooltip 텍스트 꾸미기

 

* css

  #login__name {
    cursor:pointer;
  }

 

  #login__name:hover {
    border: 2px dashed rgb(94, 106, 216);
    border-radius: 7px;
    width:90px;
    height:40px;
    padding-top:5px;
    padding-left:10px;
    padding-bottom:5px;
  }

 

.ui-tooltip {
  padding: 10px 20px;
  color: blue;
  border-radius: 20px;
  box-shadow: 0 0 7px green;
  font-size: 20px;
  font-weight: bold;
}

 

* html

<div id="login__name" class="pos-abs" title="Go to the admin page."></div>

 

* js

$('#login__name').tooltip();