Changing the bootstrap popover position for a particular element

Question

I am using the bootstrap popover on a table of data as you will see from my jsFiddle below each cell creates a popover when clicked on.

I am trying to adjust the position or 'placement' of the popover for the last td in a row, the idea is when the last cell is clicked the popover will be positioned to the left rather than the top.

You will see if you scroll to the end of the table click on the last cell i have implemented the selection but not the positioning.

Any ideas on how to achieve this?

http://jsfiddle.net/N8NNC/1/

Heres by javascript for the popovers:

$(".metapop").popover({ 

    html: true,
    trigger: 'manual',
    placement: 'top',
    title: "You clicked on this cell:",
    content: 'hello this is a popover'

}).click(function(e) {

        $('.popover').hide();
        $(this).popover('show');
        if($(this).parent().is('td:last-child'))
            {
                alert($(this))
            }
    });

Answer 1

You could assign a function to the 'placement' option like this..

$(".metapop").popover({ 

    html: true,
    trigger: 'manual',
    placement: function(pop,ele){
        if($(ele).parent().is('td:last-child')){
        return 'left'
        }else{
        return 'top'
        }
    },
    title: "You clicked on this cell:",
    content: 'hello this is a popover'

})