jQuery tooltip на ячейке таблицы

Я пытаюсь создать простую подсказку на ячейках таблицы с помощью jQuery.
Я написал этот код:jQuery tooltip на ячейке таблицы

<script type="text/javascript"> 
     $(function() { 

      $(".test").bind("mouseenter", function (e) { 
       $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY }); 
       $("#ToolTipDIv").show("slow"); 
      }); 
      $(".test").bind("mouseleave", function (e) { 
       $("#ToolTipDIv").hide("slow"); 
      }); 
     }); 

    </script> 
<div id="ToolTipDIv" style="background-color: Yellow; display: none; width: 20%;"> 
     This is a text 
    </div> 
    <table class="style1" border="1"> 
     <tr> 
      <td class="test"> 
       1 
      </td> 
      <td class="test"> 
       6 
      </td> 
     </tr> 
     <tr> 
      <td class="test"> 
       2 
      </td> 
      <td class="test"> 
       7 
      </td> 
     </tr> 
     </table>

Но это не работает, как ожидалось. когда я нажимаю мыши над ячейками. Подсказка Div закрывается и открывается несколько раз.
например, я хочу просмотреть подсказку для третьей ячейки. Я нажимаю указатель мыши над первой и второй ячейками, чтобы достичь третьей подсказки cell.jQuery, будет отображаться и скрываться 3 раза.
jsfiddle link

источник

2011-07-05 Shahin

Это потому, что, когда ваш новый DIV всплывает и ваша мышь «в», что новый ДИВ вы больше не парит на старом месте. Мое предложение сначала - использовать зависание jquery вместо того, чтобы конкретно указывать mouseenter и т. Д., А затем посмотреть на плагин hoverintent. но для исправления вашей проблемы вам нужно установить абсолютную позицию всплывающего div.

источник

2011-07-05 04:54:56 kasdega

Не могли бы вы отредактировать мою скрипку? http://jsfiddle.net/DmnMQ/2/ – Shahin

По определению ваш код не будет работать. Вы хотите, чтобы всплывающая подсказка отображалась, когда вы наводите что-то на мыши и уходите, когда ваша мышь уходит, однако, как только всплывающая подсказка поместится в положение мыши по определению, это означает, что она покидает ваше исходное местоположение. Я создал скрипку http://jsfiddle.net/DmnMQ/12/ с примером того, что бы я сделал, но если возможно, я попытаюсь использовать существующий код для подсказок инструмента jquery. – kasdega

Большое вам спасибо :):] – Shahin

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

$(function() { 
    $(".test").bind("mouseenter", function (e) { 
     $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY }); 
     $("#ToolTipDIv").show('normal'); 
    }); 
    $(".test").bind("mouseleave", function (e) { 
     $("#ToolTipDIv").hide(); //Note I removed 'slow' 
    }); 
});

И добавьте position: absolute; стиль вашей подсказке элемента.

Я обновил вашу скрипку: http://jsfiddle.net/DmnMQ/3/ и он работает ОК.

Надеюсь, это поможет. Cheers

источник

2011-07-05 04:52:06

Я проверил вашу скрипку. подсказка должна отображаться в положении мыши. – Shahin

Таким образом, вы можете использовать 'mousemove' вместо' mousenter' –

-1

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

http://code.drewwilson.com/entry/tiptip-jquery-plugin

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

<td><span class="tiptipClass" title="your tooltip text here">1</span></td>

источник

2011-07-05 04:53:00 Harindaka

Я загружаю форму формуляра формы подсказки AJAX. – Shahin

Вы можете так же легко установить заголовок диапазона через javascript can not u? – Harindaka

jQuery tooltip на ячейке таблицы

ответ

Смежные вопросы