CODEWITHSUNDEEP
jqueryfocusqtipqtip2
David
David

Reputation: 875

how to focus on an element inside qtip (jquery plugin)

I'm trying to open a qtip (v2.0.0) and get it to focus on a link -- the first item in a menu. (More generally, I am trying to use this wonderful qtip as a sort of context menu and place the focus on the first li/menu item so they can conveniently press Enter rather than having to click.) So...

$("tr.request td").qtip({
        content : {
            text: $('#qtipMenu').clone(),
            title : {button : true, text : ' '}
        },
        position : {my : 'bottom center' , at : 'top center'},
        show : {event : 'click'},
        hide : false, 
        events : {
            show : function(){ 
                var selector =  "#"  + this.id + " ul > li:first > a " ;

                // for the sake of experiment...
                $(selector).focus(function(){console.warn("focus on this "+this.tagName + " element!") })
                // and the callback fires, but...
                $(selector)[0].focus(); // doesn't work
                $(selector).focus(); // doesn't work either
                // nor does this:
                $("div.ui-tooltip-content ul > li:first > a").focus();
                // ...though I know I'm definitely addressing this element
                // and can manipulate it in other ways
            },
            render : function(event) {
                $("div.ui-tooltip-content ul").removeAttr('id').show()
            }
        }
    });
}

FWIW, the content of each qtip is cloned from a hidden UL element, thus:

<ul id="qtipMenu" style="display:none" class="qtip-menu">
   <li><a href="admin/requests/view">view details</a></li>
   <li><a href="admin/requests/add">add to schedule</a></li>
   <li><a href="admin/requests/delete">delete</a></li>
</ul>

and yes it's wrapped inside a $(document).ready(function(){}). The "focus" event handler fires as expected, but the actual focus of the browser UI is not happening (hope I'm explaining myself clearly).

Any ideas?

Upvotes: 2

Views: 1348

Answers (1)

David
David

Reputation: 875

And the answer is... do it on "visible" rather than "show." "visible" happens after "show"

$(myTarget).qtip( {

    events: {
        visible : function() {  $(myElementWithinTheTooltip).focus() }
    }
);

May it save someone else a few hours of pain. I will leave it to you ninjas to explain what internal subtleties of timing gave rise to my problem.

Upvotes: 6

Related Questions