Notes, How Tos, Things To Remember, Things I'll soon forget

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 ...

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__