Thursday, April 5, 2012

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:
__END__

10 comments:

  1. Hey Lee, I'm glad you put the time in to do this. I'm curious how I could add buttons with their own callbacks to the content of the clickover?
    Thanks

    ReplyDelete
    Replies
    1. Yes! This would be awesome. I am very interested in this as well. Did you guys already find a solution?

      Delete
  2. As someone who was getting frustrated with some of popover's limitations, this is godsend. Thanks for writing it!

    ReplyDelete
  3. This is just great! Thank you very much for the Bootstrap tweak.

    ReplyDelete
  4. Exactly what I need for my project. Thanks a bunch!

    ReplyDelete
  5. Great,
    I'm wondering if you ever had the need to make one popover/tooltip to appear on page load
    It will need as brief instructions
    It will close automatically in some seconds
    When it will be closed (either automatically or by a close button) it will also be destroyed

    Do you have an hint about this?

    Thank you

    ReplyDelete
    Replies
    1. Sorry on the third line I'm meaning
      *Its purpose is to provide some few brief instructions

      Delete
  6. It increased, because now he was using leverage….borrowed cash. He known as me on the day he was prepared to begin adding to with Actual Property with another issue. As I recommended him “get into Actual Property AndrewMedalas easily as you can, around the $10,000 indicate its a chance to get into that game”

    ReplyDelete
  7. SMS Marketing software is used to send sms to a list of mobile numbers using a a copmuter/Laptop

    ReplyDelete