jquery 동적 툴팁

Question

나는 "a la ajax"스타일의 파일에서 툴팁을로드 할 수 있기를 좋아하지만 처음에는 html 텍스트를 title 속성으로 "transfert"할 수 있는지보고 싶습니다.

내가, 제목 속성에 숨겨져 (실제 텍스트)를 편집 할 슈퍼 쉬운 것입니다 (http://jquery.bassistance.de/tooltip/demo/에서) JQuery와 툴팁 여기

코드

<div class="odeurbox"> 
<img src="odeurs/aiguilledepin.jpg" 
width="67" height="67" /> 
Aiguille de pin </div> 

<div class="tohide"> 
<h3>Agrumes :</h3> 
<p>Les agrumes sont les fruits des végétaux des g....</p> 
<em>Source : Le Petit Robert 2009</em></div> 

그 방법을 사용

1. 그래서, 가시성 추가해야합니다
2. 는

내 jQuery 코드는 내가했던 이전 DIV 제목의 클래스 .tohite 및 폴리 우레탄 그것 사업부의 전체 콘텐츠를 tohide CSS 클래스에 숨겨진 그럼에도 불구하고 일을하지 말아라. 그 일을하는 올바른 방법이되어야한다.

짧게 말해, 클래스와 함께 각 div에 대해 .odeur 다음 (자식?)의 내용을 가져 와서 속성 title = ''에 넣는다.

아직 작동하지 않는 것 :

$('div.odeurbox').each(function(){$(this).attr("title", $('.tohide').html());}); 

Answer 1

기본적으로 원본 HTML을 제목 필드에 저장 하시겠습니까? 그건 단순히 작동하지 않습니다. 그것은 신성하지 않은 비율의 HTML 오류를 생성합니다.

대신 텍스트를 제목 필드에 저장하는 것이 좋습니다 (자바 스크립트 개체를 반드시 실용적으로 작성해야합니다.) 그리고 원시 HTML을 저장할 수 있습니다.]])

제목 입력란에 툴팁 텍스트를 저장하는 경우 툴팁을 작성하는 데 자바 스크립트가 필요하지 않습니다 ... 브라우저가 자동으로 수행합니다.

사용자 정의 툴팁을 원한다면 툴팁으로 사용되는 빈 div를 만든 다음 Javascript 객체에서 표시하는 텍스트를 추출하는 것이 좋습니다. 예를 들어

: 이미지

<img id="foo" src="http://localhost/foobar.jpg"> 

툴팁을위한 HTML에 대한
HTML. 이 jQuery를

으로,

var my_object = new Object(); 
my_object['foo']['title'] = 'The almighty foobar'; 
my_object['foo']['description'] = 'Spy sappin\' mah Stack!'; 
my_object['foo']['source'] = 'Guide to the Universe'; 

그런

jQuery('img').hover(
    function() { 
     var tip = jQuery('#tooltip'); 
     tip.find('h3').text(my_object[this.id]['title']; 
     tip.find('p').text(my_object[this.id]['description']; 
     tip.find('em').text(my_object[this.id]['source']; 
     tip.show(); 
    }, 
    function() { 
     jQuery('#tooltip').hide(); 
    } 
).mousemove(function(e) { 
    jQuery('#tooltip').css({ 
     'top': e.PageY + 10 + 'px', 
     'left': e.PageX + 10 + 'px', 
    }) 
} 

이도없이 작동

<div id="tooltip"> 
    <h3></h3> 
    <p></p> 
    <em></em> 
</div> 

자바 스크립트 팁에가있는 요소의 아이가 아닌 이것은 어디만큼 될 수 있습니다 모든 플러그인.

Answer 2

글쎄 실제로 제목 필드에 원시 HTML을 넣을 수 있습니다. HTML의 모든 인용 부호를 "으로 바꾸거나 작은 따옴표를 사용하는 한 (아래에서와 같이)

나는 이것을하기 위해 과거에 this tooltip을 사용했습니다. 제목에는 표시되는 툴팁 데이터가 들어 있습니다.이 스크립트는 제목에 플래그가있는 경우 할당 된 ID에서 데이터를 가져 오는 modified here입니다. 여기

이 툴팁 사용하는 방법의 예 :!, 내가 taht를 많이 기대 해달라고

<a class="tooltip" href="http://www.google.com" title="<center><img src='http://www.google.com/logos/11th_birthday.gif'><br>Happy 11th Birthday Google!</center>">Google</a>