9

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?

Jesper Rønn-Jensen
  • 106,591
  • 44
  • 118
  • 155
  • maybe try to close your popover on a click, see: http://stackoverflow.com/questions/8947749/how-can-i-close-a-twitter-bootstrap-popover-with-a-click-from-anywhere-else-on – Bass Jobsen May 16 '13 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 May 17 '13 at 07: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 May 17 '13 at 19:54

1 Answers1

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.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);
});
davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • 1
    nice. When i hover a tr when a popover already opened, popovers won't work again – Bass Jobsen May 17 '13 at 19:56
  • It must be something else. Try the jsfiddle. The popovers are not destroyed, manipulated or anything else. – davidkonrad May 18 '13 at 09:02
  • i tried the jsfiddle. Maybe `insidePopover` stays true unexpected in some cases – Bass Jobsen May 18 '13 at 11:06
  • Which browser? Have just now tested in Chrome, FireFox, Safari and IE. It works in Chrome, FireFox and Safari, but the table messes completely up in IE. This is not caused by the script above, though - does the same in @Jesper Rønn-Jensens fiddle also. Guess it is _yet_ _another_ IE-compatibility issue. – davidkonrad May 18 '13 at 12:20
  • i found the problem with chrome and FF both on linux. I think i first fire the mouseenter (and mouseleave) of .second row first. After this i trigger the mouseenters (mouseleaves) of .first (with delay) and after this i trigger the mouseenter of the popover of the .second event. – Bass Jobsen May 18 '13 at 12:39
  • It _is_ made with Chrome / ubuntu, as it is my work environment. Tested in ubuntu also with Opera and FF, worked as local file and in the jsfiddle as well. However, one time by FF and jsfiddle, the popover disappeared. But after multiple F5s and hundreds of mouseovers the disapperaring couldnt be reproduced. Eg 1 time in FF. Unless you can point out how the popovers should disappear using them as they are _intended_ to - there are absolutely no hackish' about the code above, simple manual triggering, hide and show - I conclude this is rare local event, perhaps related to a jsfiddle conflict. – davidkonrad May 19 '13 at 17:10
  • Extremely cool you made that video! What can I say? Cannot reproduce the problem. But what I see is exactly what i discovered a single time with FF. Suddenly, the popovers disappear. Maybe it is the "in bottom" ? Interesting. Thank you for sharing. – davidkonrad May 20 '13 at 17:15
  • Thanks for sharing your code. I also tried the jsfiddle (latest Chrome on Linux) and managed to "break" the popovers by rapidly passing the cursor over the various tr elements. I also saw the second popovers at the top of the screen, as Bass reported. I Shift+F5 refreshed the jsfiddle three times, and each time it was simple to recreate the problem. Nonetheless, will see if I can adapt this code to work for our similar popover with link issue, and share if I make any progress. – Phantomwhale Jul 19 '13 at 00:24