jQuery dynamic tooltip

Question

Мне нравится загружать всплывающую подсказку из файла «a la ajax» style .... но сначала мне нравится видеть, могу ли я передать «html-текст» в атрибут title

я использую JQuery и всплывающую подсказку (от http://jquery.bassistance.de/tooltip/demo/)

здесь код

<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. так, мне нужно добавить видимость: скрытый в класс CSS tohide
2. получить все содержимое DIV с классом .tohite и о.е. его в предыдущем названии сНа

мой код JQuery я сделал но не работает ... что должно быть правильным способом?

Короче говоря, для каждого div с классом .odeur получить содержимое следующего (дочернего?) tohide и поместить его в атрибут title = ''

что-то вроде этого еще не работает:

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

Answer 1

Итак, вы в основном хотите хранить необработанный HTML в поле заголовка? Это просто не работает. Это создало бы HTML-ошибки нечестивых пропорций.

Вместо этого, почему бы вам просто не сохранить текст в поле заголовка (но только если вам нужно ... Javascript-объект с содержимым будет более практичным [И вы можете хранить в нем необработанный HTML-код;)])

Если вы храните текст всплывающей подсказки в поле заголовка, вам не понадобится Javascript для создания всплывающей подсказки ... Браузер сделает это за вас.

Если вам нужна специальная подсказка, я бы предложил создать пустой div, который служит подсказкой, а затем извлечь текст, который он отобразит из объекта Javascript.

Например:
HTML для изображений

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

HTML для всплывающей подсказки. Это может быть где угодно, пока это не является потомком элемента он должен наклонить

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

JavaScript

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

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', 
    }) 
} 

Это должно работать даже без любые плагины.

Answer 2

На самом деле вы можете поместить необработанный HTML в поле заголовка. Пока вы заменяете все кавычки в HTML " или используете одинарные кавычки (как я сделал ниже).

Я использовал this tooltip в прошлом, чтобы сделать именно это. Заголовок содержит данные всплывающей подсказки, которые отображаются.И этот скрипт был modified here, чтобы извлекать данные из назначенного идентификатора, когда он находит флаг в заголовке.

Вот пример того, как использовать эту подсказку:

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