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__

Monday, May 21, 2012

Bootstrap popover with function driven content

In another post, I wrote about a technique that allowed loading content into a popover using a function.

Its a great feature but I found one gotcha. If you set anything in the data-content attribute on the trigger element, the content will not be loaded with the function.

Maybe I should say that again for myself, If you want to use content: function() {...} your element must not include data-content

Don't use:
<a id="mypopover" href="#" 
   data-content="will not run function"> Label </a>
Use:
<a id="mypopover" href="#" > Label </a>
__END__