mopTip Закрепить всплывающую подсказку

Andreyлф · 5 мар 2014

Имеется всплывающая подсказка, которая двигается за мышью.
Хочу чтобы она появлялась справа от элемента.

Спойлер

/*position*/
if(mopTipIe==true){
mopTipScrollX = document.documentElement.scrollLeft;
mopTipScrollY = document.documentElement.scrollTop;
mopTipMouseX=window.event.clientX+mopTipScrollX;
mopTipMouseY=window.event.clientY+mopTipScrollY;
}else{
mopTipScrollX = window.pageXOffset;
mopTipScrollY = window.pageYOffset;
mopTipMouseX=evt.pageX;
mopTipMouseY=evt.pageY;
}
mopTipWindW=document.documentElement.clientWidth;
mopTipWindH=document.documentElement.clientHeight;
var windXsc=mopTipWindW+mopTipScrollX;
var windYsc=mopTipWindH+mopTipScrollY;
var checkX=windXsc-mopTipMouseX;
var checkY=windYsc-mopTipMouseY;

var mopTipCheckHeight=mopTipChangeY;
var preCheckHeight=mopTipH+40+40;

if(mopTipNoHeight==false){
if(mopTipCheckHeight<preCheckHeight){
mopTipCheckHeight=preCheckHeight;
}
}else{
mopTipCheckHeight=mopTipChangeY;
}
mopTipLeft=mopTipMouseX+mopTipxOffset;
mopTipTop=mopTipMouseY+mopTipyOffset;
if((checkX>mopTipW)&&(checkY>mopTipCheckHeight)){
/*shape left top*/
mopTipxOffset=-50;
mopTipyOffset=30;
$("#mopTip01 .arrowSet tr").html('<td class="arrow"> </td><td class="top"> </td>');
$("#mopTip01 .top").css({width:mopTipW-60+"px",height:"20px"});
$("#mopTip01 .arrowSet").css({width:mopTipW+"px"});
$("#mopTip01 .arrowSetBottom tr").html('<td class="bottom"> </td>');
$("#mopTip01 .bottom").css({width:mopTipW+"px",height:"20px"});
}else if((checkX<=mopTipW)&&(checkY>mopTipCheckHeight)){
/*shape right top*/
mopTipxOffset=-mopTipW-10;
mopTipyOffset=30;
$("#mopTip01 .arrowSet tr").html('<td class="top"> </td><td class="arrow"> </td>');
$("#mopTip01 .top").css({width:mopTipW-60+"px",height:"20px"});
$("#mopTip01 .arrowSet").css({width:mopTipW+"px"});
$("#mopTip01 .arrowSetBottom tr").html('<td class="bottom"> </td>');
$("#mopTip01 .bottom").css({width:mopTipW+"px",height:"20px"});
}else if((checkX>mopTipW)&&(checkY<=mopTipCheckHeight)){
/*shape left bottom*/
mopTipxOffset=-50;
if(mopTipNoHeight==false){
mopTipyOffset=-(mopTipH+40+40);
}else{
mopTipyOffset=mopTipYoff;
}
$("#mopTip01 .arrowSet tr").html('<td class="top"></td>');
$("#mopTip01 .top").css({width:mopTipW+"px",height:"20px"});
$("#mopTip01 .arrowSet").css({width:mopTipW+"px"});
$("#mopTip01 .arrowSetBottom tr").html('<td class="arrowBottom"> </td><td class="bottom"> </td>');
$("#mopTip01 .bottom").css({width:mopTipW-60+"px",height:"20px"});
}else if((checkX<=mopTipW)&&(checkY<=mopTipCheckHeight)){
/*shape right bottom*/
mopTipxOffset=-mopTipW-10;
if(mopTipNoHeight==false){
mopTipyOffset=-(mopTipH+40+40);
}else{
mopTipyOffset=mopTipYoff;
}
$("#mopTip01 .arrowSet tr").html('<td class="top"></td>');
$("#mopTip01 .top").css({width:mopTipW+"px",height:"20px"});
$("#mopTip01 .arrowSet").css({width:mopTipW+"px"});
$("#mopTip01 .arrowSetBottom tr").html('<td class="bottom"> </td><td class="arrowBottom"> </td>');
$("#mopTip01 .bottom").css({width:mopTipW-60+"px",height:"20px"});
}
/*pngFix*/
$("#mopTip01").pngFix();
mopTipFunc.setPosi();
},

само решение взял отсюда

Скрытый контент. Для просмотра Вы должны быть зарегистрированным участником.
Нажмите, чтобы раскрыть...

xoff · 5 мар 2014

думаю стоит копать в сторону js

Andreyлф · 5 мар 2014

Да я тож так думаю. Но где что?

предполагаю что тут

Спойлер

if(mopTipIe==true){
mopTipScrollX = document.documentElement.scrollLeft;
mopTipScrollY = document.documentElement.scrollTop;
mopTipMouseX=window.event.clientX+mopTipScrollX;
mopTipMouseY=window.event.clientY+mopTipScrollY;
}else{
mopTipScrollX = window.pageXOffset;
mopTipScrollY = window.pageYOffset;
mopTipMouseX=evt.pageX;
mopTipMouseY=evt.pageY;
}

Altairk · 5 мар 2014

ИМХО лучше использовать http://habrahabr.ru/post/168273/

Andreyлф · 5 мар 2014

а я в них смогу HTML код писать?
Мне это главное.

siseod · 29 апр 2014

Все очень просто.
Находите скрипт tooltip.js, подключаете.
Далее просто к нужным элементам прописываете class="tooltip" - важно, чтобы у элементов был прописан title.

Например:
Код:
<a class="tooltip" title="Текст подсказки" href="url">

Extremum · 8 июн 2014

Сейчас на CSS таких решений немало, причем работают даже в IE. Вот например: http://habrahabr.ru/post/168273/ и http://habrahabr.ru/post/161041/ для вывода, а вот генератор: http://cssarrowplease.com/