BootstrapX clickover

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 leaves the clickover.

Out of these needs spawed the library: bootstrapx-clickover.

Usage Examples

Basic

html:

<button rel="clickover" 
  data-content="Show something here. 
    <button data-dismiss='clickover'
    >Close Clickover</button>"
>Show clickover</button>

javascript:

// load click overs using 'rel' attribute
$('[rel="clickover"]').clickover();

For more complex details and examples check out:

• Examples
• Github - clickover docs

__END__