Get the context when clicking a button in a qtip jquery

Question

This is a generic question. I have the following code where #datatable is (you guessed it) a datatable

$("#datatable").on(
    "mouseenter",
    "td",
    function(event) {
        $(this).qtip(
            {
                content:"<button>Test</button>",
                position: {
                    my: 'bottom left',
                    at: 'center right',
                    adjust : {
                        method: "shift"
                    },
                    viewport: $('#datatable')
                },
                show: {
                    event: event.type,
                    ready: true
                },
                hide: {
                    fixed: true
                }
            },
            event
        );
    }
);

I would like to be able to use all the niceties of $(this) when I click my button in the qTip2 tooltip (e.g get the column name and/or the value of the cell).

jsFiddle here : when you click on the Test button, how would one show an alert with the column name for example ?

Answer 1

You could give your button a class and trigger on click after the tooltip has been rendered.
No need for the this-keyword:

content:"<button class='my-btn'>Test</button>",
/*...*/
events: {
    render: function(e, api){
        $(".my-btn").on("click", function(){ 
            alert(api.target[0].innerText); 
        });
    }
}

---

Live Demo

Answer 2

You can access the tooltip after it's been rendered - Documentation Link

    events: {
        render: function(event, api) {
                // console.log( api ); // to see the full list
            console.log( api.target[0].innerText ); // return the text of the cell
        }
    }

Fiddle