Geek asks and answers

Change the position of a step-by-step bootstrap for a specific item

I use bootstrap popover in the data table, as you will see from my jsFiddle below, each cell creates a popover when clicked.

I'm trying to adjust the position or "placement" of the popover for the last td in the line, the idea is that when you click the last cell, the popover will be located on the left, and not on the top.

You will see if you go to the end of the table, click on the last cell, I implemented the selection, but not the positioning.

Any ideas on how to achieve this?

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

Heres javascript for 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))
            }
    });
+5
source share
1 answer

You can 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'

})
+5
source

More articles:


All Articles