Hint.css для пунктов меню?

Question

[id_baton4eg]

Пытаюсь сделать всплывающие пункты описания меню, сейчас код выглядит так:

<li id="menu-item-1996" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-203 current_page_item"><a href="http">Главная</a></li>

Думаю использовать kushagragour.in/lab/hint чтоб наиболее просто получить всплывающие описания

Как используя js\jquery добавить к id="menu-item-1996" :
class="hint--bottom"
data-hint="Тест наведения"

Спасибо)))

Answer 1

[Денис Богданов]

Заключить следующий код в обработчик события:

$('#menu-item-1996').addClass('hitn--bottom').attr('data-hint', 'Тест наведения')

Comments

[id_baton4eg]

а как можно сделать перенос слов в .attr('data-hint', 'Тест
наведения') ?

[Денис Богданов]

Что значит перенос слов?

[id_baton4eg]

den-bogdanov:
$('#menu-item-2312').addClass('hitn--bottom').attr('data-hint', "Начинающим водителям. ( \n
 ) Водителям без опыта.");

Ни один из вариантов переноса текста на след. строку не всработал(((

[id_baton4eg]

den-bogdanov: блин удалились, пробовал \n   br /

[Денис Богданов]

Можно переопределить стили [data-hint]:after в своих стилях, по дефолту там стоит white-space: nowrap, и возможно потребуется ограничить ширину

[id_baton4eg]

den-bogdanov: таким образом и сделал, но пытался делать перенос в ручную после точки)))