Wednesday, May 30, 2012

bootstrap popover responsive layout

As i was working on solving some problems with Bootstrap's popovers and our responsive webapp design, I came up w/ this simple snippet to change the location of the popover using placement option using the current window's width.

Example of how to set placement using function:

$('.show-details').popover({
  placement: function(tip, ele) {
    var width = $(window).width();
    return width >= 975 ? 'left' : ( width < 600 ? 'top' : 'right' );
  }
});

In the long run i think it would make more sense to setup those location options in a map or site wide setting object along the lines of:

var superapp = {};

superapp.popover_layouts = {
   full:  { width: 975, pos: 'left'},
   mid:   { width: 600: pos: 'right'},
   micro: { width: 320: pos:  'top' }
};

function determine_placement(tip, ele) {
   var width = $(window).width();
   var map   = superapp.popover_layouts;

   .... TBD .... :)
}

I'm not sure I'm crazy about that. I wonder if using media queries is a better option. In our situation we will need to adjust the class on each popover.

Probably need a bit more thought on it all.

 __END__

2 comments:

  1. WP SMS Marketing are available dedicated to help to SMS Marketing is the latest form of engaging with your customers,,visit site

    ReplyDelete