Как реализовать всплывающие подсказки для тачпадов?

Question

[iplaton]

Для пунктов меню по событиям mouseover и mouseout показывается или скрывается div с подсказкой. На десктопе прекрасно работает. А для тачпада подсказка ведет себя непредсказуемо. Либо сразу идет обработка клика меню без подсказки, либо подсказка показывается и висит не скрывается мешая просмотру контента... Кто как делает? Желательно минимальный примерчик, тк я в js не очень..

Comments

[ProjectSoft]

Зачем всегда пользователю показывать подсказки?
Если из названия пункта не понятно зачем оно, то выводить иконку, например вопроса, и по клику и тачу показывать подсказку.
Реально, пользователей раздражают постоянные подсказки, когда они пользуются сайтом постоянно.
Конечно решать вам.

Хорошо бы увидеть код в песочнице.

[iplaton]

function tooltip(target_items, name) {
    $(target_items).each(function (i) {
        $("body").append("<div class='" + name + "' id='" + name + i + "'><p>" + $(this).attr('title') + "</p></div>");
        var tt = $("#" + name + i);
        $(this).removeAttr("title").mouseover(function () {
            tt.css({opacity: 0.9, display: "none"}).fadeIn(300);
        }).mousemove(function (kmouse) {
            tt.css({left: kmouse.pageX + 15, top: kmouse.pageY + 15});
        }).mouseout(function () {
            tt.fadeOut(400);
        });
    });
}
tooltip(".tip", "tooltip");

Answer 1

[Евгений]

На тачпадах нет события ховер. Так что либо откажитесь от этой идеи, либо делайте по клику событие

Comments

[Виталий Киренков]

Либо принудительно скрывать подсказки для тач девайсов