2010-04-03 3 views
4

링크하지 않고 툴팁을 표시 할 수 있습니까? 예를 들어jQuery : 링크가없는 툴팁 표시

, I는 링크하지 않고 다음 코드를 한 :

<ul class="letters" title="This is the title"> 
<li>A</li> 
<li>B</li> 
<li>C</li> 
</ul> 

그래서 어떻게 툴팁 " 이 제목입니다 "보여줄 수있는 때에 내가 마우스 이상?

Btw, 툴팁 플러그인을 사용하고 싶지 않습니다.

답변

5

당신은 당신이 원하지 않는 말을 조금 더 열심히 인생을 만들고있어 다른 사람들이 이미 수행 한 작업을 활용할 수 있습니다. :-)

구성 부품의 일부 :

  • 당신은 $ 또는 jQuery를 통해 title 속성을 가지고있는 ul 모든 요소를 ​​찾을 수 있습니다

    var targets = $("ul[title]"); 
    
  • 당신은 그들을 볼 수 mouseenter 이벤트의 경우 mouseleave 이벤트가 X 밀리 초 이내에 실행되지 않으면 툴팁을 표시하십시오. (이들은 IE 관련 이벤트이지만 jQuery는 모든 브라우저에서이 이벤트를 제공하므로 매우 유용합니다. hover도 제공되므로 mouseentermouseleave 핸들러를 연결하는 데 편리합니다.) 많은 이벤트 처리기 (mouseentermouseleave은   —의 일부분을 매우 편리하게 만듭니다.)의 많은 부분이입니다. 문서 수준에서 mouseover/mouseout을 추적하고 발생할 수있는 복잡성을 처리하는 것이 더 나을 것입니다. 왜냐하면 그들은 일을 거품으로 처리하기 때문입니다.

  • 은 ( offset를 통해) 문제의 요소의 위치를 ​​확인하고 (당신이 attr를 통해 얻을 수있다)를 절대 위치 div 근처가 포함 된 제목을 표시 할 수 있습니다, 당신의 도구 설명을 표시합니다.

  • 사용자가 툴팁 (mouseleave)에서 마우스를 움직일 때 제거하십시오.

그러나 다시, 당신은 이미 끝났어 프로젝트에서 코드를 사용하는 것이 좋습니다 모든 주름 등 발견코드를 먼저 읽고 그것이 원하지 않는 일을하고 있는지 확인하십시오. 그러나 바퀴를 재발 명하는 것은 대개 (항상 그렇지는 않습니다!) 시간 낭비입니다 ... 실제로 사용하지 않을지라도 플러그 인은 함정이 무엇인지 알아보기 위해 유용 할 것입니다.

1

은 title 속성을

title = $('.letters').attr('title'); 

를 확인하고 거기에서 작동합니다. Jquery에는 "title_tooltip_popup()"함수가 없으므로 직접 만들거나 플러그인을 사용하는 것이 좋습니다.


당신이 클래스와이 셀렉터를 작업하는 경우

$('.letters') 

1 개 이상의 요소를 참조 할 수 있음을 기억

+0

내 잘못 코멘트 ... – bloggerious

+0

$ ('문자.') 가져가 (함수() { \t 제목 = $ (이) .attr ('제목'); }).; – Ben