Question

I asked this question regarding changing the position of a bootstrap popover depending on the size of the screen.

The answer was great – however I also now want to change the action for popovers (so it’s on click for mobile) as well as the location, and am having difficulty re-factoring the code. This is what I have:

$(document).ready(function(){
    $('#my_list li').popover({
        placement: wheretoplace
    });
});

function wheretoplace(){
    var width = window.innerWidth;
    if (width<500) return 'below';
    return 'left';
}

How would I amend the wheretoplace function to return two things: the placement value along with a trigger value? I’ve got the existing stuff in a jsFiddle.

Edit – I’ve amended my jsFiddle above to show the complete solution, adding a click event to @James’ answer below.

Answer 1

If you are trying to return two values from the function, try assigning them as properties of an object and then return that object.

eg.

function wheretoplace(){

    var data = {};    

    var width = window.innerWidth;

    if (width<500)
    { 
        data.placement = 'below';
    }
    else
    {
        data.placement = 'left';
    }

    data.trigger = "myEvent";

    return data;

}

Then in the function calling wheretoplace:

$(document).ready(function(){
    $('#my_list li').popover({
        placement: wheretoplace().placement,
        trigger: wheretoplace().trigger
    });
});

Is this what you are trying to do?

EDIT: In Response to the comment below:

As with the jsFiddle demo

By assigning the trigger as “manual” on document ready, you are then able to call $(element).popover("toggle") in a click handler which will toggle the appearance of the popover.