Bootstrap popovers for table row hover: Not possible to click link inside popover

Question

I have table rows where I display additional information in a twitter bootstrap popover.

A few notes from the interaction design I work with:

• Popovers must show up when you hover the row
• Popovers will contain 1 or more links

Now, the link part is the hard part. If you move the mouse from the table row, to the popover (which contains the link), the popover will disappear!

I am creating the the popover with this code:

var options = {placement: 'bottom', trigger: 'hover', html: true};
$(this).popover()

-- which assumes relevant html including the link is generated and put in data-content attribute

Notice this {placement: 'bottom' }. In order to make it possible to move the mouse to the popover, I tried {placement: 'in bottom'} (added in keyword, which generates popover dom element inside the selector).

Problem is for table rows, that is not really legal HTML-wise. Perhaps that's why placement: 'in bottom' renders even more ugly: The popover glues to the top of my viewport.

Try my demo in My example on JSFiddle

It contains the examples ...

My question is how should I define my popover, so that it is possible to click the links -- given the limitations set by the interaction design?

Answer 1

The problem is obvisously that the popover does what it is supposed to do. When you attach popovers to <tr>'s, and let the popover respond to hover - and the popover hangs below the <tr>'s bottom - you will never be able to reach the content of the popover.

Trigger:hover can easily be mimicked by trigger:manual like this

$('table').on('mouseenter', 'tr', function() {
    $(this).popover('show');
});
$('table').on('mouseleave', 'tr', function() {
    $(this).popover('hide');    
});

Setting trigger:manual enable us to manipulate the popover behaviour. The solution below adds a little delay to the mouseenter / mouseleave-events, and then check if the mouse is inside the popover (by attaching events to the popover themselves). If the mouse is inside a popover, a new popover will not be shown, and the active popover will not be hidden, even if there has been a mouseenter-event in another <tr>. Forked jsfiddle : http://jsfiddle.net/xZxkq/

var insidePopover=false;

function attachEvents(tr) {
    $('.popover').on('mouseenter', function() {
        insidePopover=true;
    });
    $('.popover').on('mouseleave', function() {
        insidePopover=false;
        $(tr).popover('hide');
    });
}

$('table').on('mouseenter', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) {
            $(tr).popover('show');
            attachEvents(tr);
        }
    }, 200);
});

$('table').on('mouseleave', 'tr', function() {
    var tr=$(this);
    setTimeout(function() {
        if (!insidePopover) $(tr).popover('hide');  
    }, 200);
});