Создание подсказки JQuery для получения нового значения при каждом перемещении мыши

Question

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

Пользователь наводит курсор на ячейку таблицы, и затем приложение генерирует число, чем дальше вправо перемещается курсор в ячейке, тем выше увеличивается значение.

Я создал всплывающую подсказку, и когда курсор наводится на ячейку, он действительно показывает правильное значение. Но когда я перемещаю мышь, она не показывает новое значение, а только старое. Мне нужно знать, как заставить его обновляться каждый раз, когда движется мышь или изменяется значение переменной. Есть идеи для проблемы?

<table>
      <tr id="mon_Section">
          <td id="day_Title">Monday</td>
          <td id="mon_Row"></td>
      </tr>
</table>

Ниже приведена функция document.ready, которая вызывает мою функцию:

$(document).ready(function()
{
    $("#mon_Row").mousemove(calculate_Time);
}); 

Ниже приведена функция:

<script type="text/javascript">
var mon_Pos = 0;
var hour = 0;
var minute = 0;
var orig = 0;
var myxpos = 0;

function calculate_Time (event)
{
myxpos = event.pageX;
myxpos = myxpos-194;

if(myxpos<60)
{
    orig = myxpos;
    $('#mon_Row').attr("title", orig);
}
if (myxpos>=60 && myxpos<120)
{
    orig=myxpos;
    $('#mon_Row').attr("title", orig);
}
if (myxpos>=120 && myxpos<180)
{
    orig=myxpos;
    $('#mon_Row').attr("title", orig);

Внутри функции находится код для генерации всплывающей подсказки:

$('#mon_Row').each(function()
{
    $(this).qtip(
    {
        content: 
 {
     text: false
 },
 position: 'topRight',
    hide: 
 {
     fixed: true // Make it fixed so it can be hovered over
    },
 style: 
 {
     padding: '5px 15px', // Give it some extra padding
        name: 'dark' // And style it with the preset dark theme
 }
    });
});

Я знаю, что новое значение присваивается атрибуту заголовка ячейки, поскольку он будет отображаться внутри стандартной небольшой подсказки, отображаемой браузером. Подсказка JQuery не будет захватывать новое значение и отображать его, только начальное значение переменных при вызове.

Answer 1

Ваш код не очень понятен для меня, так что это просто длинный выстрел. Сначала попробуйте удалить код, чтобы упростить анализ в случае проблем со ссылками:

$(document).ready(function() {

    $("#mon_Row").mousemove(function() {

        calculate_Time() ; 
        $(this).qtip(
            //
        ) ;

    );

});

Насколько я могу судить, вы хотите установить атрибут title элемента в положение, а затем прочитать и отобразить его значение с помощью функции qtip(). В этом нет необходимости: если вы заставите calculate_Time() вернуть значение,

function calculate_Time (event) {

    var orig ;
    //conditions setting orig to myxpos 
    return orig ;

}

Вы можете сохранить его в переменной var myOrig = calculate_Time() и затем передать его в функцию всплывающей подсказки qtip(myOrig) или передать вызов самой функции в качестве параметра qtip( calculate_Time() ) ;. Это может быть проще в обслуживании и отладке.

Hth

Answer 2

Если jQuery не делает то, что вы хотите, пропустите jQuery и обработайте его в сыром JavaScript, вот что я сделал для всплывающей подсказки:

<script type="text/javascript">
function hover(intext,e){
    if(!intext){return}
    document.getElementById("hoverdiv").innerHTML=intext
    document.getElementById("hoverdiv").style.display=""
    var x=0
    var y=0
    if(e.pageY>-1){
        x=e.pageX
        y=e.pageY
    }
    else{
        x=e.clientX
        y=e.clientY
        if(document.documentElement.scrollTop>-1){
            x+=document.documentElement.scrollLeft
            y+=document.documentElement.scrollTop
        }
        else if(document.body.scrollTop>-1){
            x+=document.body.scrollLeft
            y+=document.body.scrollTop
        }
    }
    document.getElementById("hoverdiv").style.left=(x+24)+"px"
    document.getElementById("hoverdiv").style.top=(y-24)+"px"
}
function hoverout(){
    document.getElementById("hoverdiv").style.display="none"
}
</script>
<div id="hoverdiv" style="display:none;position:absolute;background-color:#eef;border:1px solid black;padding:3px 6px;width:180px;"></div>

Соедините его с onmosuemove и onmouseout следующим образом:

<a onmouseout='hoverout()' onmousemove='hover("Tooltip",event)' href='#'>Hover</a>