0

Всем привет, написал небольшой код для всплывающей подсказки

$(function(){
            var links = $('a[title]');
            links.hover(
            function(){
                var current = $(this);
                var tooltipText = current.attr('title');
                $('div class="tooltip"/div').hide().appendTo(current).text(tooltipText)
.fadeIn(500);
            },function(){
                $('div.tooltip').fadeOut(500, function(){
                    $(this).remove();
                });
            });
        });

Возникла одна проблема аттрибут title никуда не делся и браузер отображает дефолтную подсказку тоже при наведении на ссылку. Как можно передавать содержимое переменной tooltipText второй функции, чтобы можно было создать аттрибут title опять? И установить его с помощью attr('title',tooltipText )

Хтмл код самый простой - просто ссылка с аттрибутом title, таких ссылок на странице будет много.

3 ответа 3

2
$(function(){
    var links = $('a[title]');
    links.hover(function(){
        var current = $(this);
        var tooltipText = current.attr('title');
        $('<div class="tooltip"></div>').hide().appendTo(current).text(tooltipText).fadeIn(500);
        current.removeAttr('title');
    }, function(){
        $('.tooltip', this).fadeOut(500, function(){
            $(this.parentNode).attr('title', this.innerHTML);
            $(this).remove();
        });
    });
});

Так сойдет? Хотя и тут я бы некоторые моменты переписал на чистом js...

1
  • Да Ваша концепция очень хорошая, правильно ведь нам не нужно ничего сохранять и передавать, мы можем вытащить содержимое дива и засунуть его в наш титле. Респект.
    – makregistr
    10 мая 2011 в 14:50
1
$(function(){
            var links = $('a[title]');
    $('a[title]').each(function() { $(this).attr('rel', $(this).attr('title')); $(this).removeAttr('title') }).hover(
            function(){
                var tooltipText = $(this).attr('rel');
                $('<div class="tooltip"></div>').hide().appendTo($(this)).text(tooltipText)
.fadeIn(500).attr('rel', tooltipText);
            },function(){
                $('div.tooltip').fadeOut(500, function(){
                    $(this).remove();
                });
            });

    });

Может быть как-то так?

1
  • Это мы просто перезаписываем содержимое титле в аттрибут рел, а как сделать чтоб в момент ховер титле сохранялся в переменную и удалялся, а когда мышь уходит из области ссылки, вторая функция получала бы этот параметр и опять восстанавливала аттрибут титле. При этом большое спасибо, код полностью рабочий.
    – makregistr
    10 мая 2011 в 14:42
1

Вот как я изменил скрипт (теперь все на jquery) и закрыл свой тикет. Всем большое спасибо!

$(function(){
            var links = $('a[title]');
            links.hover(
            function(){
                var current = $(this);
                var tooltipText = current.attr('title');
                $('<div class="tooltip"></div>').hide().appendTo(current).text(tooltipText).fadeIn(500);
                current.removeAttr('title');
            },function(){
                var tooltipDiv = $('div.tooltip');
                var tooltipText = tooltipDiv.text();
                $(this).attr('title', tooltipText);
                tooltipDiv.fadeOut(500, function(){
                    $(this).remove();
                });
            });

        });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.