1

И так, есть tooltip, который превращает атрибут title в блок и делает его кастомным.

JQ:

$.fn.nwfTooltip = function (showTime, hideTime) {
    $(this).each(function (i, a) {
        if (!$(a).attr('title')) return;
        a.nwfTooltipTitle = $(a).attr('title');
        $(a).attr('title', '').bind({
            mouseover: function (evt) {
                if ($('.nwf-tooltip').size() > 0) return;
                $('.nwf-tooltip').remove();
                $('<div class="nwf-tooltip" style="top:' + (evt.pageY + 15) + 'px; left:' + (evt.pageX + 10) + 'px; display: block; opacity: 0;">' + a.nwfTooltipTitle + '</div>').appendTo('body').animate({
                    top: (evt.pageY + 10) + 'px',
                    opacity: 1.0
                }, showTime);
            },
            mouseout: function () {
                $('.nwf-tooltip').fadeOut(hideTime, function () {
                    $(this).remove();
                });
            }
        });
    });
};
$(function () {
    $('*[title]').nwfTooltip(100, 50);
});

CSS:

.nwf - tooltip {
    position: absolute;
    display: none;
    background: #c1321d;
    color: #fff;
    padding: 5px;
    max - width: 250px;
}

Тултип появляется в месте, где была наведена мышка, но не двигается за ней, если область большая (т.е. вообще не двигается, а на большой области это плохо смотрится). Как сделать, чтобы тултип ездил вместе с курсором?

P.S. Я в jQuery полный 0, поэтому ссылки на документацию и т.п. мне не помогут.

1 ответ 1

3

Попробуйте такой вариант - http://jsfiddle.net/Deonis/E7jq4/2/.

JS

$.fn.nwfTooltip = function(showTime,hideTime){
    if(!$(this).attr('title')) { return; }
    var tooltipTitle, posTop, posLeft, titleTxt;
    var tooltipBlock = '<div class="nwf-tooltip">' + tooltipTitle + '</div>';
    $(this).mouseover(function(e){
        posTop = e.pageY;
        posLeft = e.pageX;
        titleTxt = $(this).attr('title');
        $(this).attr('title','');
        $(tooltipBlock).text(titleTxt).appendTo('body').css({
            top: posTop,
            left: posLeft
        }).fadeIn(showTime);

        $(document).on('mousemove',function(evt){
            if($('.nwf-tooltip').css('display') == 'block'){
                $('.nwf-tooltip').css({
                    left: evt.pageX,
                    top: evt.pageY
                });
            }
        });
    }).mouseout(function(){
        $(this).attr('title',titleTxt);
        $('.nwf-tooltip').fadeOut(hideTime, function(){
            $(this).remove();
        });
    });
};
$(function(){
    $('*[title]').nwfTooltip(400,200);
});
2
  • Спасибо. А что, если есть просто title, но он пустой? Тогда квадратик начинает бегать. Как избавиться от такого? В моем примере такого не было. P.s. Двиг генерит картинки в таком виде вот и не красота получается: <img src="bla.png" alt="" title>
    – acidernt
    31 мая 2012 в 16:16
  • 1
    Вторую строчку в коде: if(!$(this).attr('title')) { return; } Замените на: if(!$(this).attr('title') || $(this).attr('title') == "") { return; } И перенасите её сразу после строки $(this).mouseover(function(e){
    – Deonis
    31 мая 2012 в 16:50

Ваш ответ

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

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