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__

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
    Replies
    1. Hey man what is popover and can explain me that what is popover and how to uses it.
      Join our latest whatsapp related stuff
      Latest Active Whatsapp Groups Links For 2019
      Girls WhatsApp Group Link
      Whatsapp Status 2019

      Delete
  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
  8. It’s great to come across a blog every once in a while, that isn’t the same out of date rehashed material. Fantastic read.

    Angular Training in Chennai
    Angular JS Training in Chennai

    ReplyDelete
  9. https://www.cutehindi.com/2019/02/best-names-for-pubg.html

    ReplyDelete
  10. if you are searching for free unlimted tricks then visit now on Uvoffer.com and get unlimited offers and informations.
    film ka naam whatsapp puzzle answer film ka naam whatsapp puzzle

    ReplyDelete
  11. if you want girls mobile numbers then this website is best for you . you can visit on this website and get their information and you also can meet with thrm and go for a date . click here to use our website --- online dating website

    ReplyDelete
  12. many peoples want to join random whatsapp groups . as per your demand we are ready to serve you whatsapp group links . On this website you can join unlimited groups . click and get unlimited whatsapp group links

    ReplyDelete
  13. amazing blog layout! How long have you been blogging for? Get Free Girls WhatsApp Numbers Latest 2019 you make blogging look easy.

    ReplyDelete

Post a Comment

Popular posts from this blog

2 ways to get SQLite to put dates into columns

What's installed on my ec2