CODEWITHSUNDEEP
javascriptjqueryqtip
Avinash
Avinash

Reputation: 2183

jQuery qTip show/hide on keyboard clicks(Enter Key)

I am able to show/hide jQuery qTip on mouse click but I want to show/hide the qTip on click of Enter key along with mouse clicks.

Can some one please help me on this.

$('.LoginUserProfile').qtip({
                content: {
                    text: '<span class = "login_jobTitle" title = ' + UserJobTitle + '>' + UserJobTitle + '</span><br/>',
                    title: 'My Profile',
                    //button: 'Close'
                },
                show: {
                    solo: true,
                    click: true,
                },
                show: 'click',
                hide: {
                    event: 'click unfocus'
                },
                position: {
                    my: 'top right',  // Position my top left...
                    at: 'bottom left', // at the bottom right of...
                    viewport: $(window)
                },
                style: {
                    classes: 'qtip-tipsy profile-dropdown',
                    tip: false
                },

Upvotes: 0

Views: 253

Answers (1)

Avinash
Avinash

Reputation: 2183

Below is the answer.

var showUserProfile = true;

$('.LoginUserProfile').keyup(function (e) {
    if (e.keyCode === 13) {
        if (showUserProfile) {
            $('.LoginUserProfile').qtip("show");
            showUserProfile = false;
        }
        else {
            $('.LoginUserProfile').qtip("hide");
            showUserProfile = true;
        }
    }
});

Upvotes: 0

Related Questions