javascript - Bootstrap popovers for table row hover: Not possible to click link inside popover - Stack Overflow

admin管理员组

文章数量:1287523

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?

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?

• javascript
• twitter-bootstrap
• popover

Share Improve this question Follow asked May 16, 2013 at 21:55 Jesper Rønn-JensenJesper Rønn-Jensen 112k4545 gold badges122122 silver badges160160 bronze badges 3

• maybe try to close your popover on a click, see: stackoverflow./questions/8947749/… – Bass Jobsen Commented May 16, 2013 at 22:53
• @BassJobsen, not sure I follow you. First off, it would change the interaction for the user with the page. This would confuse users of my website. Also, I want to open each popover on :hover, but you say they should be closed on click. In that case, when I move the mouse across, say 10 rows, 10 popovers would open. – Jesper Rønn-Jensen Commented May 17, 2013 at 7:22
• open popover on :hover and close all others. Problem will be you will touch other :hovers when moving to the popover maybe. I like the idea of @davidkonrad too, to use a delay. – Bass Jobsen Commented May 17, 2013 at 19:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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/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);
});

本文标签： javascriptBootstrap popovers for table row hover Not possible to click link inside popoverStack Overflow