Invoke data-hover="tooltip" behaviour using JavaScript

Question

Facebook shows the "likes" on a post ("x people like this") through an anchor whose tooltip content is loaded dynamically on hover. For example, this publicly-available Facebook post has a "1,453 people" [like this] anchor defined as:

<a data-testid="n_other_people_link" 
   class="UFINoWrap" 
   rel="dialog"
   ajaxify="/ajax/browser/dialog/likes?actorid=104958162837&amp;id=10152950941352838" 
   href="/browse/likes?actorid=104958162837&amp;id=10152950941352838" 
   data-hover="tooltip" 
   data-tooltip-alignh="center" 
   data-tooltip-uri="/ajax/like/tooltip.php?comment_fbid=10152950941352838&amp;comment_from=643726632&amp;seen_user_fbids=true&amp;av=643726632"
   role="button" 
   data-reactid=".2.1:1.0.$right.0.0.0.$range0/=10">
   1,453 people
</a>

On hover, this anchor acquires an aria-label attribute containing the names of the persons who liked the post. The content is retrieved asynchronously from Facebook through AJAX.

<a data-testid="n_other_people_link" 
   class="UFINoWrap" 
   rel="dialog" 
   ajaxify="/ajax/browser/dialog/likes?actorid=104958162837&amp;id=10152950941352838" 
   href="/browse/likes?actorid=104958162837&amp;id=10152950941352838" 
   data-hover="tooltip" 
   data-tooltip-alignh="center" 
   role="button" 
   data-reactid=".2.1:1.0.$right.0.0.0.$range0/=10" 
   aria-label="(Name 1)
      (Name 2)
      (...)
      and 1,434 more..." 
   id="js_9">
   1,453 people
</a>

Is there a way of simulating this behaviour – namely, getting the aria-label attribute populated – through JavaScript or jQuery? I'm using the Console feature of the browser's developer tools (Firefox or Chrome). I can get the aria-label populated by invoking the click event, but that causes a dialog to be launched as well; I just need the "hover" behaviour.

@Taplar: Thanks for the suggestion. Just tried it; behaviour seems inconsistent. `jQuery($0).trigger('mouseover')` works in Chrome, but not in Firefox. (I first selected the anchor to test, and pasted the jQuery source.) — Douglas, Nov 07 '15 at 12:59
@Taplar: Tried it again, and it works in Firefox too; thanks! If you paste your comment as an answer, I'll accept it. — Douglas, Nov 07 '15 at 13:06

score 1 · Answer 1 · answered Nov 07 '15 at 13:09

1

The event that is fired when a user moves their mouse on top of an element is 'mouseover'. With jQuery you can programatically start this behaviour on an element by doing.

$(selector).trigger('mouseover');

answered Nov 07 '15 at 13:09

Taplar

24,788
4
22
35

I've run some more trials, and found that this approach fails silently (i.e. doesn't populate the `aria-label` attributes) on around half the pages. I haven't figured out what the issue is (jQuery, Facebook, browser console), but `dispatchEvent` seems to be more reliable. – Douglas Nov 08 '15 at 12:33

score 0 · Answer 2 · edited May 23 '17 at 12:15

I've found that trigger('mouseover') is not reliable for this operation, failing silently on around half the pages.

The dispatchEvent approach proposed in this answer seems to work more consistently:

var evObj = document.createEvent( 'Events' );
evObj.initEvent( 'mouseover', true, false );
$('a[data-hover="tooltip"]:not([aria-label])').each(function (i, a) { 
    a.dispatchEvent( evObj ); 
});

Expanded version that introduces time delays and status updates to console:

var evObj = document.createEvent( 'Events' );
evObj.initEvent( 'mouseover', true, false );
var toHover = $('a[data-hover="tooltip"]:not([aria-label])');

toHover.each(function (i, a) {
    setTimeout( function() { 
        var info = $(a).attr('data-tooltip-uri');
        console.log('Loading ' + (i + 1) + ' of ' + toHover.length + ': ' + info);
        a.dispatchEvent( evObj );
    }, i * 100);
});

Invoke data-hover="tooltip" behaviour using JavaScript

2 Answers2