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

Birth The last few weeks, i've been pushing Bootstrap in various directions. Most of the time, its being hacking around Popovers. Our current design uses Popovers with forms. It provides a very nice balance between in page action and more subtle interruption to viewing the page than a modal. Over the last few weeks, I've found a few quirks with using Popover's trigger action of 'focus'. This works fine with forms but on Chrome and Safari 'focus' events are supported incompletely . In addition to that varied support we have a few other needs that inspired a new Bootstrap extension. BootstrapX - Clickover . Our requirements are: Click button/link/icon to toggle display of popover content Option to click 'away' from popover to close Ability to have 'popover' autoclose after some amount of time Option to have element inside of popover hide it I suspect, in the future, it will need to only auto close when user's mouse...

Bootstrap is a nice get started HTML/CSS/JS interface toolkit. At $work our newest design has been based on it and many of its components. One of the challenges I've run into with the Popover element is generating in attribute content for complex elements. The basic context is: <a id="mypopover" href="#" data-content="stuff to display"> Label </a> The popover gets the body from the data-content attribute. The other option that doesn't appear to be documented is using a function set in the options. $('#mypopover').popover({ // other options here content: function(ele) { return $('#popover-content').html(); } }); This will load the html content from element '#popover-content' when calling 'show' on popover. Note : If trigger element still has a data-content element, even if its empty, the content function will not be called by method. My biggest issue still with Bootstrap tools is t...