7

Some cells in my SlickGrid table have myClass class.

I added a tooltip for them like this:

$(".myClass").hover(// Mouse enters
                    function(e) {...},
                    // Mouse leaves
                    function() {...});

It works fine, but if I scroll the table to the bottom, and then scroll it back to the top, the tooltip does not appear anymore.

Can someone suggest any workaround ?

Thanks !

Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746

4 Answers4

15
        grid.onMouseEnter.subscribe(function(e, args) {
            var cell = grid.getCellFromEvent(e)
            var row = cell.row
            var item = dataView.getItem(row);
            //do whatever
        });

        grid.onMouseLeave.subscribe(function(e, args) {
            //do whatever
        });

cell, row and item are just examples for how to get to data

Dmitry Grinberg
  • 695
  • 2
  • 7
  • 15
4

try:

$('.myClass').live('mouseover mouseout', function(event) {
 // works only on jQuery 1.4.1 and up
  if (event.type == 'mouseover') {
    // Mouse enters 
  } else {
    // Mouse leaves
  }
});

if that doesn't work, I'm guessing .myClass has been remove so try adding it again in every scrolls...

either way, use the live()

Reigel Gallarde
  • 64,198
  • 21
  • 121
  • 139
  • Excellent ! It works :) One thing bothers me: I see in docs that "The .hover() method binds handlers for both mouseenter and mouseleave events". So, why replacing `mouseover` with `mouseenter` will not work ? I checked and found out that if I put `mouseenter` instead of `mouseover`, then `function(event) {..}` is called also while `event.type = "mouseover"`. Why is that ? Thanks for your help ! – Misha Moroshko May 06 '10 at 05:09
  • 2
    live() is deprecated, resp. it doesn't exist anymore in jQuery 1.9. – markus Feb 27 '13 at 12:32
3

There's a plugin for Slickgrid that will display tooltips for items that are too big to show in a cell (if that's what you're ultimately looking to do): SlickGrid: how to view full text for long cell entries?

Community
  • 1
  • 1
E.Z. Hart
  • 5,717
  • 1
  • 30
  • 24
0
1. include ../slick/plugins/slick.autotooltips.js
ex)     

    <script src="/jsp/slick/plugins/slick.autotooltips.js"></script>

2. add code

    $.get(url,function(data){

    ...

    grid.registerPlugin( new Slick.AutoTooltips({ enableForHeaderCells:
    true }) );

    ...


more...

use jquery.ui.tooltips

ex)
<link rel="stylesheet" href="/jsp/jui/themes/base/jquery.ui.tooltip.css"/>
<script src="/jsp/jui/ui/jquery.ui.core.js"></script>
<script src="/jsp/jui/ui/jquery.ui.widget.js"></script>
<script src="/jsp/jui/ui/jquery.ui.position.js"></script>
<script src="/jsp/jui/ui/jquery.ui.tooltip.js"></script>

open slick.grid.js and modify function 2436(line)

    function setActiveCellInternal(newCell, opt_editMode) {
      if (activeCellNode !== null) {
        makeActiveCellNormal();
        $(activeCellNode).removeClass("active");
        try{$( document ).tooltip("destroy");}catch(e){}    // <<<< add code
        try{$( document ).tooltip();}catch(e){}         // <<<< add code
        if (rowsCache[activeRow]) {
          $(rowsCache[activeRow].rowNode).removeClass("active");
        }
      }
teja
  • 36
  • 3