Вход

Просмотр полной версии : Модификация тултипа на jQuery


andreyua
18.03.2012, 00:52
Есть тултип
http://pafnuty.name/statyi/45-prostoj-tooltip-s-podderzhkoj-html-tegov-na-jquery.html

Нужно изменить код, чтобы если курсор находится по иксу в другой половине экрана, тултип показывался слева от курсора.
Там он показывается постоянно справа.
Я так понял надо этот код изменять:

function l_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var tooltip = $("#"+name+i);
if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){
$(this).removeAttr("title").mouseover(function(){
tooltip.css({opacity:0.9, display:"none"}).fadeIn(30);
}).mousemove(function(kmouse){
tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}).mouseout(function(){
tooltip.fadeOut(10);
});
}
});
}
Помогите кто может или дайте ссылку на уже готовый вариант, если таковой имеется ...

nightkon
18.03.2012, 07:06
Вот хороший плагин у ruseller'a, сам им пользуюсь.

http://ruseller.com/lessons.php?rub=32&id=766

andreyua
18.03.2012, 14:04
Спасибо. Попробую если, никто изменит тот что я выложил...
upd. Криво у меня работает. Помогите с кодом кто может....

andreyua
18.03.2012, 18:22
Вот это

}).mousemove(function(kmouse){
tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});

Заменил этим

}).mousemove(function(kmouse){
element = document.getElementById( name+i );
if (kmouse.pageX > $(document).width() / 2) {
//tooltip.css({left:kmouse.pageX-tooltip.width()-5, top:kmouse.pageY+15});
tooltip.css({left:kmouse.pageX-element.offsetWidth-5, top:kmouse.pageY+15});
} else {
tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}


Вроде работает, но как вот это:
element = document.getElementById( name+i );
и вот это
tooltip.css({left:kmouse.pageX-element.offsetWidth-5, top:kmouse.pageY+15});
Реализовать через jQuery, так как если jQuery, то во всем jQuery, а то приходится еще раз искать элемент через обычный JS, хотя он уже найден через jQuery :help: ;)

andreyua
18.03.2012, 18:57
Называется сам спросил сам и сделал :D
function l_tooltip(target_items, name){
$(target_items).each(function(i){
$("body").append("<div class='"+name+"' id='"+name+i+"'><p>"+$(this).attr('title')+"</p></div>");
var tooltip = $("#"+name+i);
if($(this).attr("title") != "" && $(this).attr("title") != "undefined" ){
$(this).removeAttr("title").mouseover(function(){
tooltip.css({opacity:0.9, display:"none"}).fadeIn(30);
}).mousemove(function(kmouse){
if (kmouse.pageX > $(document).width() / 2) {
tooltip.css({left:kmouse.pageX-tooltip.outerWidth()-5, top:kmouse.pageY+15});
} else {
tooltip.css({left:kmouse.pageX+15, top:kmouse.pageY+15});
}
}).mouseout(function(){
tooltip.fadeOut(10);

});
}
});
}

Bradshaw
19.03.2012, 12:10
Здравствуйте

Хотел создать тему, но заметил точно такую же, только с другим Тултипом. И если ТС уже разобрался, позволю себе вклиниться со своим вопросом. Моя проблема почти такая же, никак не могу сделать, что бы окно всплывало слева от курсора, а не справа. Притом честно сказать в скриптах я фактически не разбираюсь. Поэтому, если кто может, помогите, пожалуйста, поправить этот код...
Вот он (http://cloud.github.com/downloads/enriquez/ezpz-tooltip/jquery.ezpz_tooltip.js). Выложил в сслыке чтобы не создавать простыню, т.к. он довольно большой.
Нашел его тут (http://theezpzway.com/demos/ezpz-tooltip), но в силу минимальных знаний английского, нормально прочитать тот блог я не могу...
Вот частичный пример его работы (http://jsfiddle.net/jnafx/)

Bradshaw
19.03.2012, 14:58
что, никто не знает?