Всем привет! Нашел очень хороший и удобный плагин для отображения дополнительной информации о чем либо по наведению курсора на объект. Вот ссылочка на плагин (там же документация и демонстрации работы):
http://designwithpc.com/Plugins/Hovercard
Все бы хорошо, но никак не могу допетрить... Вот код одной из демок:
<p>Текст с интересным <label id="demo-basic">словом</label> в содержании.</p>
<div id="hiddenDiv"><p>Информация которая будет отображена как только курсор окажется над "словом" из строки выше.</p</div>
$('#demo-basic') . hovercard ( // если курсор над словом с id = "demo-basic"
{
detailsHTML:$('#hiddenDiv') . html () // отображаем текст из блока (блок можно сделать скрытым) с id = "hiddenDiv"
});
И все хорошо работает! Но, только вот во всех демках идентификаторы событий указаны ЯВНО: - наведи курсор на что-то с id = 'myWord' и увидишь то-то из блока с id = 'infoBlock'
А что если мне нужно делать вывод информации динамически?! И я не могу явно указать id'шники слов и панелей с инфой для них... К примеру: у меня в цикле выводится список постов и описаний к ним. Получается что-то типа:
<div class = 'post_wrapper'>
<div id = 'pt_id_1' class = 'post_title'>Заголовок 1</div>
<div id = 'pi_id_1' class = 'post_info'>Описание 1</div>
<div id = 'pt_id_2' class = 'post_title'>Заголовок 2</div>
<div id = 'pi_id_2' class = 'post_info'>Описание 2</div>
</div>
И как вот мне сделать, чтобы по наведению курсора на заголовок какого-то поста, отображалось соответствующее описание ?!