마우스 오버시 텍스트 툴팁

Question

총알 세트가 있는데, 마우스를 개별적으로 가져갈 때 툴팁을 만들고 싶습니다. 툴팁 텍스트는 글 머리표 제목 태그가 될 수 있으며 툴팁 컨테이너로 출력되어야합니다. Newbie to javascript 그래서 내가 도움이 필요한 곳입니다. 여기

내 CSS의 :

.container ul { width: 300px; height: 30px; display: block; background: #CCC; } 
.container li { width: 28px; height: 28px; display: block; float: left; border: 1px solid #FFF; } 
.tooltip { width: auto: height: 12px; display: block; } 

내 HTML :

<div id="tooltip" class="tooltip"></div> 
<div class="container"> 
    <ul> 
     <li class="book" title="book"></li> 
     <li class="movie" title="movie"></li> 
     <li class="tv" title="tv"></li> 
    </ul> 
</div> 

그리고 내 자바 스크립트 :이 직접 귀하의 질문에 대답하지 않지만, 몇 가지 편리한가

<script> 
$(document).ready(function(){ 
    $("ul li").mouseover(function() { 
     $("#tooltip").text($(this).attr("title")); 
    }); 
}); 
</script> 

Answer 1

변화를.

툴팁 텍스트는이 기능을 사용하는 요소의 제목 속성에서 가져온 경우가 많지만 다른 곳에서 가져올 수 있습니다.

툴팁의 위치와 텍스트의 위치를 ​​설정할 수 있습니다.

$('textarea').tooltip({ 
     position: { 
      my: 'left center', 
      at: 'right center' 
     } 
    }); 

그러나 코드에서 툴팁의 텍스트를 가져올 수 있습니다. 또는 다른 텍스트 - 툴팁 선택한 옵션에 따라 텍스트가 포함이 경우 같은

$('select').tooltip({ 
position: { 
     my: 'right center', 
     at: 'left center' 
    }, 
    content: function(){ 
     if($(this).find('option:selected').val() == 0) 
     { 
      return '...'; 
     } 
     else 
     { 
      return '...' + $(this).find('option:selected').val() + '...'; 
     } 
    } 
}); 

.

Answer 2

이 기능을 위해 이미 존재하는 jQuery 플러그인. 나는이 같은 : http://craigsworks.com/projects/qtip/a

일부 다른 사람 :

$("#tooltip").text($(this).attr('alt'));

Answer 3

내가 jQuery를 UI 기능 툴팁 제안에

$("#tooltip").text("this.val(alt)")

에서 http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/