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
  14. Really amazing article thanks for this article.

    ayushman mitra bharti

    ReplyDelete
  15. Go Health Science is a best resource to get all kinds of Knowledge about Health and Science updates on Healthy Life ideas.

    ReplyDelete
  16. You can easily report Google Adsense about fraud clicks by filling the invalid activity appeal form.

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. Thanks for this valuable information ..

    Interested in upcoming mi phones in 2019 then click on this link = Upcoming Mi Phones In 2019

    ReplyDelete
  19. Excellent Blog. I really want to admire the quality of this post. I like the way of your presentation of ideas, views and valuable content. No doubt you are doing great work. I’ll be waiting for your next post. Thanks .Keep it up! Kindly visit us @Luxury Boxes
    Premium Packaging
    Luxury Candles Box
    Earphone Packaging Box
    Wireless Headphone Box
    Innovative Packaging Boxes
    Wedding gift box
    Leather Bag Packaging Box
    Cosmetics Packaging Box
    Luxury Chocolate Boxes

    ReplyDelete

  20. This information Vert nice thanks for share this article thank you..

    Good Morning Shayari in Hindi

    ReplyDelete
  21. 7/13,17/26,28/29,33/52 निम्न भिन्नों में कौन सी सबसे छोटी हैं ?
    किसी संख्या को 899 से भाग देने पर शेषफल 63 प्राप्त होता है यदि उस संख्या को 29 से भाग दें तो शेषफल क्या होगा ?
    यदि 5432x7 , 9 से विभाज्य हों , तो x के स्थान पर अंक होगा ।
    यदि किसी संख्या का तिगुना , इस संख्या के 3/5 से 60 अधिक हो , तो वह संख्या हैं ।
    किसी संख्या का 1/5 है , उसी संख्या के 1/7 से 10 अधिक है , वह संख्या है ।
    369 के आधे भाग का 2 / 3 भाग क्या होगा ।
    एक टैंक का एक - चौथाई भाग 135 लीटर पानी धारण करता हैं । यदि टैंक में 180 लीटर पानी हो हो तो टैंक का कितना भाग भरा हुआ हैं ।
    एक व्यक्ति अपनी आय का 1/4 भाग भोजन पर ,2/3 भाग मकान के किराये पर तथा शेष आय जो 630 रूपये है , अन्य सामान पर खर्च करता है । तो उसके मकान का किराया ज्ञात करो ।

    maths tricks in hindi !

    ReplyDelete
  22. I just couldn’t depart your web site before suggesting that I extremely enjoyed the standard info a person provide for your visitors? Is gonna be back often to check up on new posts Majhi naukri

    ReplyDelete
  23. Hey very nice blog!! Man... Excellent.. Amazing.. I will bookmark your site and take the feeds also…I’m happy to find a lot of useful info here in the post, we need work out more strategies in this regard, thanks for sharing. . . . . . Majhi naukri

    ReplyDelete
  24. Download latest audio and video file fromvidmate

    ReplyDelete

  25. If you like netflix and make sure read this article for what is Netflix.

    Netflix - Watch Movies, TV Shows Online

    ReplyDelete
  26. OGinsta is an Instagram mod apk that allow you to download videos and photo from instagram.

    ReplyDelete
  27. Nice blog. I Love reading all your blog post. it feels so nice and enjoying reading your blogs.

    if you want to travel Nepal, visit us at:

    Adventure Discovery Travel
    everest Base Camp Helicopter Tour
    EBC Heli Tour
    Helicopter Tour to Everest

    ReplyDelete
  28. This is the exact information I am been searching for
    Products24
    Really useful information. Thank you so much for sharing.
    Green KineMaster

    ReplyDelete
  29. This is the exact information I am been searching for
    Products24
    Really useful information. Thank you so much for sharing.
    Green KineMaster

    ReplyDelete
  30. Thanks for posting useful information.You have provided a nice article, Thank you very much for this one. And I hope this

    will be useful for many people.. and I am waiting for your next post keep on updating these kinds of knowledgeable

    things...Really it was an awesome article...very interesting to read..please sharing this information......I think your

    suggestion would be helpful for me. I will let you know if its work for me too. Thanks and keep post such an informative

    blogs.

    Askmetraveller

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete

  32. Thank You for nice article. This is very helpful for me. I will learning a lot from you and your website, it is so inspiring!!!

    Best regards from India

    View My Free HEX to RGBA Tool and give me some feedback please.

    ReplyDelete
  33. Thanks For Providing Us this Great Iformation .Get Our Some Quality Services Buy Adsense Accounts .
    Here is also avilable Buy Adsense Accounts .
    You Can Watch Adsense Earning Trick Here Youtube Channel Buy Adsense Accounts .

    ReplyDelete
  34. IIT JEE Coaching in Patna | IIT JEE Institute in Patna | NEET Coaching in Patna | Medical Coaching in Patna | JEE Mains, JEE Advance Coaching in Patna | Europa Classes

    JEE Mains, JEE Advance Coaching in Patna

    ReplyDelete
  35. Hindisales provide you most productive Offers notification for you. If you Want to buy any products for you. Just check offers on that products in hindisales and check it out from here
    Hot offers on Amazon]

    ReplyDelete
  36. tipsontechnology

    learn every time new tips on technology

    Hey my audience, in this website we’ll post about many tips on technology. many tips on hacking, education and many entertainment niche. i’ll post somethin Tips on technology
    g special for you, Everyday
    So check out it from here

    ReplyDelete
  37. Anushka Sen:- She is an actress from India. she works on many roles in his tiny age. The main role of his carrier was Balveer as Mehar. Peoples calls him The purple star of India. His age in this time for about 17 years and she gets about three big roles in his acting carrier. And now she is working on Manikarnika(Jhansi ki Rani).

    Anushka Sen

    ReplyDelete
  38. Hi, I found your post so interesting. Thank you for the valuable information for my students of dissertation proposal writing service uk who have been searching the academic papers for a while

    ReplyDelete
  39. Interesting post ! Keep it up
    https://www.healthbuks.com/

    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