Jquery Tooltip проблем

[niker]

$(function() {
var offsetX = 15;
var offsetY = 15;
$('a[rel=tooltip]').hover(function(e) {
var href = $(this).attr("href");
$('<div id="tooltip">
<div class="tipHeader"></div>
<div class="tipBody">' + href + '</div>
<div class="tipFooter"></div>
</div>')
.css("top", e.pageY + offsetY)
.css("left", e.pageX + offsetX)
.appendTo("body").fadeIn('500').fadeTo('10',0.9);
}, function() {
$("tooltip").remove();
});
$('a[rel=tooltip]').mousemove(function(e) {
$("tooltip").css("top", e.pageY + offsetY).css("left", e.pageX + offsetX);
});
});

Това ми е функцията,
а това искам да е линка:
<a rel="tooltip" href="MAIKAMU RABOTI BE ">sddsds</a>

И да се различава нали от нормалния <a>
Обаче, нещо не се получава...

 

[lortnoc]

Ако предположим, че елемента div#tooltip е с абсолютна позиция (предполагам има css):

hint: $("tooltip") (на две места в кода) - така ли се гетва по ID, елемент с jQuery

 

[niker]

#tooltip { position: absolute; color: #fff; font-size: 10px; width: 180px; }
#tooltip .tipHeader { height: 8px; background: url('../staticContentImages/tipHeader.gif') no-repeat; }
#tooltip .tipBody { background-color: #000; padding:5px 5px 5px 15px; }
#tooltip .tipFooter { height: 8px; background: url('../staticContentImages/tipFooter.gif') no-repeat; }

Ето го стила.
Ма нещо не те разбрах

 

[emagi]

$(function() {
var offsetX = 15;
var offsetY = 15;
$('a[rel=tooltip]').hover(function(e) {
var href = $(this).attr("href");
$('<div id="tooltip">
<div class="tipHeader"></div>
<div class="tipBody">' + href + '</div>
<div class="tipFooter"></div>
</div>')
.css("top", e.pageY + offsetY)
.css("left", e.pageX + offsetX)
.appendTo("body").fadeIn('500').fadeTo('10',0.9);
}, function() {
$("tooltip").remove();
});
$('a[rel=tooltip]').mousemove(function(e) {
$("#tooltip").css("top", e.pageY + offsetY).css("left", e.pageX + offsetX);
});
});

 

[lortnoc]

@emagi's code +

$(function() {
var offsetX = 15;
var offsetY = 15;
$('a[rel=tooltip]').hover(function(e) {
var href = $(this).attr("href");
$('<div id="tooltip">
<div class="tipHeader"></div>
<div class="tipBody">' + href + '</div>
<div class="tipFooter"></div>
</div>')
.css("top", e.pageY + offsetY)
.css("left", e.pageX + offsetX)
.appendTo("body").fadeIn('500').fadeTo('10',0.9);
}, function() {
$("#tooltip").remove();
});
$('a[rel=tooltip]').mousemove(function(e) {
$("#tooltip").css("top", e.pageY + offsetY).css("left", e.pageX + offsetX);
});
});

 

[niker]

Пак не става..

Ето тук показва някаква грешка ама незнам каква:

http://img192.imageshack.us/img192/5534/sddsds.png

 

[lortnoc]

Пак не става..

Ето тук показва някаква грешка ама незнам каква:

http://img192.imageshack.us/img192/5534/sddsds.png

ммм аха значи копи пейста не е минал добре :wink:

Така трябва да го направиш или на един ред

$('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + href + '</div><div class="tipFooter"></div></div>')

или

$('<div id="tooltip">'
+'<div class="tipHeader"></div>'
+'<div class="tipBody">' + href + '</div>'
+'<div class="tipFooter"></div>'
+'</div>')

btw: или http://www.w3schools.com/jsref/

 

[niker]

Мерси и на двамата 8)