Проблемы с позиционированием jQuery Tooltip - PullRequest
Новая
       17

Проблемы с позиционированием jQuery Tooltip

1 голос
/ 08 апреля 2010

HTML: 

<a href="#" rel="tooltip-1">Open Tooltip</a>
<div id="tooltip-1">Tooltip Content</div>

JQuery: 

xOffset = $('#tooltip-1').height() + 10;
yOffset = -30 ;  
$("a[rel=tooltip-1]").hover(function(e){             
 this.t = this.attr("href");
 $("body").append("<p id='tooltip'>"+ this.t +"</p>");
 $("#tooltip")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px")
  .fadeIn("fast");  
},
function(){
 this.t = "";
 $("#tooltip").remove();
}); 
$("a[rel=tooltip-1]").mousemove(function(e){
 $("#tooltip-1")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px");
});

Два вопроса:

  1. Подсказка div (# tooltip-1) не прячется при наведении мыши.
  2. Поскольку div для всплывающей подсказки всегда будет иметь тот же идентификатор, что и REL, я бы хотел изменить вышеуказанный jQuery, чтобы он автоматически получал целевой идентификатор DIV.

Заранее спасибо за помощь.

Ответы [ 2 ]

3 голосов
/ 08 апреля 2010 
this.t = this.attr("href");

this - это узел DOM, а не оболочка jQuery: здесь нет метода attr().

(я также не понимаю, почему вы пишете в эксплоо t свойство на узле. Вы, кажется, не используете его где-либо еще.) 

$("body").append("<p id='tooltip'>"+ this.t +"</p>");

Старайтесь не создавать строки HTML из простого текста.Любые символы & или < в t и ваш HTML испорчены.(Это простой способ пропустить дыры в безопасности межсайтовых сценариев.) Вместо этого используйте text() для установки простого текстового содержимого в элементе.

(Хотя я не уверен, почему вызапись значения атрибута # во всплывающую подсказку. Вы пытаетесь прочитать HTML-код div с всплывающей подсказкой и скопировать его в p? Почему бы просто не использовать сам div с всплывающей подсказкой?)

Подсказка div (# tooltip-1) не скрывается при наведении мыши.

Она вообще не скрывается / не отображается, ваш сценарий нигде не касается.

Так как div всплывающей подсказки всегда будет иметь тот же идентификатор, что и REL

Как насчет помещения этой информации во фрагмент href вместо злоупотребления rel?Тогда ссылка на самом деле указывает на место, где она будет всплывать.

Например.что-то вроде: 

<a href="#footnote1" class="tooltip">?</a>

<div id="footnote1" style="background: yellow; width: 10em;">
    Hello!
</div>

$('.tooltip').each(function() {
    var tip= $(this.hash);
    var dx= -30, dy= -tip.height()-10;
    tip.css('position', 'absolute');
    tip.hide();

    function position(e) {
        tip.css('left', e.pageX+dx+'px').css('top', e.pageY+dy+'px');
    }
    $(this).mousemove(position);

    $(this).hover(function(e) {
        position(e);
        tip.show('fast');
    }, function(e) {
        tip.hide('fast');
    });
});

(или просто используйте один из множества уже существующих плагинов подсказок jQuery.)

2 голосов
/ 08 апреля 2010

Просто добавьте к принятому ответу: есть намного лучшая альтернатива всплывающим подсказкам jQuery, называемая jQuery tools .

Ознакомьтесь с demo .

...