Создание простых всплывающих подсказок на HTML5, CSS и jQuery

[iru]

для полного восторга не хватает demo

[denysd]

у меня сейчас нет свободного хоста. как только будет — отредактирую и добавлю демо.

[damirazo]

Используйте jsfiddle, например.

[denysd]

большое спасибо! я сейчас немного занят, но как только освобожусь обязательно сделаю лайв-демочку!

[denysd]

Готово. Вечерком сел и сделал демку:
jsfiddle.net/kJFjU/

[Ag47]

$(function() {
    var $tooltip = $("#tooltip");

    $("[data-tooltip]")
        .mousemove(function ( eventObject ) {
            
            $tooltip.text( $(this).data("tooltip") )
                .css({ 
                    "top" : eventObject.pageY + 5,
                    "left" : eventObject.pageX + 5
                })
                .show();
        
        })
        .mouseout(function () {
            
            $tooltip.hide()
                .empty()
                .css({
                    "top" : 0,
                    "left" : 0
                });
        
        });

});// Ready end.

Если кратко, то есть более короткий способ повесить обработчик на событие DomContentLoaded, переменная $data_tooltip у вас без var и поэтому вываливается в глобальную область видимости, да и, в прицнипе, она не нужна, есть специальный метод для доступа в data- аттрибутам, есть специальный метод для очистки элемета.

[denysd]

спасибо за поправки, учту.

[nick4fake]

Вы простите, но это уже десятая (двадцатая?) статья на хабре по этой теме.

habrahabr.ru/post/42997/
habrahabr.ru/post/162321/
habrahabr.ru/post/76246/
habrahabr.ru/post/137412/
habrahabr.ru/post/103242/
habrahabr.ru/post/132283/
habrahabr.ru/post/136175/
habrahabr.ru/post/107259/

Дальше было лень искать.

[bob_lyashenko]

+ еще добавлю, что подобные штуки (что пытался сделать автор) нужно делать как плагин для jQuery, чтобы я сделал

$('#my-link').tooltip('text for tooltip');

тогда уже хоть как то виден смысл.

[denysd]

я описал только пример своего решения, если буде нужно, я напишу плагин.

[jumbastic]

Простой хинт можно сделать и без JS
http://jsfiddle.net/9QTJd/

[Adward]

Вы не знаете, почему не срабатывает хинт?

jsfiddle.net/adward/9QTJd/75/

[de1vin]

В скрипте не учитывается положение слоя с подсказкой. Если объект с подсказкой прибит к правому краю — подсказка скрывается за границей окна.

[oWeRQ]

Какой фиговый пример вы подаете, вешая на mousemove кучу лишних операций. Зачем при каждом смещении курсора создавать новые объекты jQuery, менять текст и показывать тултип?

В случае тултипов уместнее использовать mouseleave вместо mouseout и mouseenter для задания контента и отображения.

Кроме того, при таком подходе $("[data-tooltip]") все элементы подгруженные динамически не подцепятся.

[yurik417]

Было бы хорошо и полезно для вас и остальных, если бы вы проанализировали уже существующие плагины и скрипты подобно вашему, типа тех что указал nick4fake, и написали плагин уже без их недостатков, а еще лучше и с новыми преимуществами:
— определение края экрана (чтобы всегда находится в видимой области)
— адаптивность
— вставка HTML, любой вложенности
— вставка ссылок
ну и т.д.
И событие тоже следует вешать все же через .on(), вдруг контент со ссылкой будут загружать аяксом

[yurik417]

Это не идеал но ближе masscode.ru/index.php/k2/item/32-litip2