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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.