How to change class on underlying element for the duration of the jQuery UI tooltip display

Question

I want to implement a feature somewhat like (but not exactly like) the hint mode of the Mahjong Titans game in Windows. In that game, you can ask the game to show you a tile that matches the tile you're on.

In my app, when the user hovers the pointer over a cell of my table, I want to display a tooltip but also add a class to the underlying cell, as well as to some other related cells, in order to highlight these cells for the duration of the tooltip display; the highlight would disappear when the tooltip closes.

The cell click event is already dedicated to some other behavior. This related-cells-highlighting behavior must be an ancillary behavior of the tooltip.

I am creating the tooltip like this now:

 $("#my-table tbody td.foo").tooltip({
        content: function () {
              // figure out the custom message to be displayed
            }

        },
        items: "td.foo",
        position: { my: "left+15 center", at: "left top" },
        show: {
            delay: 666
        }

    })

Can this instantiation approach be extended with functions that are invoked when the tooltip is displayed and when the tooltip is taken down?

In the function tied to the tooltip's opening, I would figure out which cells are involved and add the correct class to them; in the function related to the tooltip's closing, I would remove that class from those cells.

Answer 1

I think you're looking for the open and close events.

$("#my-table tbody td.foo").tooltip({
    content: function () {
        // figure out the custom message to be displayed
    },
    items: "td.foo",
    position: {
        my: "left+15 center",
        at: "left top"
    },
    show: {
        delay: 666
    },
    open: function (event, ui) {// do stuff when tooltip opens...
    },
    close: function (event, ui) {// do other stuff when tooltip closes...
    }
});