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
  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
  40. Ultimaterely lot of great information here. Very nice post.
    Android 10 features

    ReplyDelete
  41. Thanks for this amazing blog, I really appreciate with your blog. Ogen Infosystem provides one of the best Website Designing Services in Delhi.
    Website Designing Company

    ReplyDelete
  42. Oho Great Post and Thank you for share. I find main details thank you.
    Earn Paytm Cash Online

    ReplyDelete
  43. Ola Cabs Address – Headquarter Address ANI Technologies Private Limited, A Block – fifth floor, Challaghatta, Bengaluru, 560071 Telephone Number – 080-46655300
    vodafone customer care
    https://www.vodafone-customer-care-number.in/gujarat/

    ReplyDelete
  44. https://www.leadmirror.com/tool/seo-report

    ReplyDelete
  45. Www.assamjobsportal.com
    Www.gvtjobsadda.com
    Latest job in India 2019

    ReplyDelete
  46. TamilGun is not the only website that leaked Indian language movies, there are 300+ free movie downloading websites in India. Talking about Tamilgun alternatives, it includes Tamilrockers, Tamilyogi, Isaimini, Movierulz, 9xmovies etc.

    Khatrimaza
    MovieRulz
    9xMovies
    Filmywap
    TamilYogi
    TamilRockers

    They run the site with their own dedicated hosting server and many domain extensions are already registered. All these platforms do the same thing and compete with each other to leak the movie first. WorldFree4u and JioRockers also have similar piracy websites.

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

    ReplyDelete
  48. People always say that they want to watch movie online but do not want to pay money and it was very hard to do that but in these days you can watch movies for free from below sites. so go and watch for free. it was very difficult to watch movies online but you made it easy. i am so much thankful to this site which shared me the ways of watching movies online on

    TamilRockers

    7StarHD

    TamilMV

    TamilRockers

    9xRockers

    9xMovies

    TamilYogi

    FilmyZilla

    KhatriMaza

    NBA 2K20 APK

    ReplyDelete
  49. So today I thought why should you make people aware of all things about Moviescounter Bollywood, which makes it particularly dangerous as well.

    ReplyDelete
  50. Wow, amazing article. I like your way of writing this article. Can you please publish these types of more articles?

    best telugu movies download

    ReplyDelete
  51. Setelah saya mencari film, jadi saya memutuskan bahwa saya akan menonton film online dan saya mencari di google tetapi saya tidak menemukan film secara gratis. banyak dari kita akan menghadapi hal yang sama jadi saya memutuskan saya akan menyadari orang tentang hal itu.

    XXI Lite

    Vidhot

    ReplyDelete
  52. Railway RRB Study Material: We received numerous requests on the provision of a reliable Railway NTPC study plan that will suit the needs of almost every aspirant. Keeping in view, the biggest recruitment of the times is around the corner, we have come up with the RRB NTPC Study Plan which is easy to be included in your daily regime. Yes, you read it right!! Gradeup has uploaded the much-awaited Railways study plan.
    Railway Speedy GK
    lucent gk pdf
    english grammar pdf
    english grammar

    ReplyDelete

  53. Soma pill is very effective as a painkiller that helps us to get effective relief from pain. This cannot cure pain. Yet when it is taken with proper rest, it can offer you effective relief from pain.
    This painkiller can offer you relief from any kind of pain. But Soma 350 mg is best in treating acute pain. Acute pain is a type of short-term pain which is sharp in nature. Buy Soma 350 mg online to get relief from your acute pain.

    https://globalonlinepills.com/product/soma-350-mg/


    Buy Soma 350 mg
    Soma Pill
    Buy Soma 350 mg online



    Buy Soma 350 mg online
    Soma Pill
    Buy Soma 350 mg

    ReplyDelete
  54. Thank You So much for sharing information on your website. Your website is very informative to people.
    5G VPN APK Download

    ReplyDelete
  55. Are you looking for the best website to download Tamil Movies Online if yes then isaidub will help you a lot? On this website, you can watch any movies online in HD Quality.

    ReplyDelete
  56. IndoXXI Pro APK – Nonton Film Subtitle indonesia Gratis, Mudah untuk di gunakan, indoxx1 pro sangat berkualitas, sangat keren, nonton jadi mudah ?? Indoxxi Apk Lite Pro Download adalah aplikasi untuk mencari informasi film-film terbaru yang ada di indoxxi indoxx1 lk21 layarkaca21.

    Indoxxi
    IndoXXI
    Cara Download Film di INDOXXI

    ReplyDelete
  57. Technical Bagle a best resource to get all kinds of Knowledge about Wordpress, Blogging, SEO, Social Media, YouTube and Make Money Online.

    ReplyDelete
  58. These contents are very valuable to all readers and I gain my knowledge after visiting your post. Really thank you & Keep it up...pokemon colouring pages

    ReplyDelete
  59. You have a good looking web site
    Your site is exactly what I have looking for!! Keep up with the good work.
    nw-31297-2

    PS4 External Hard Drive – Top Product Of 2019

    ce-34788-0

    ReplyDelete
  60. Hello you can check our website we publish daily new job related advertisement specially from maharashtra check this site Majhi naukri thank you

    ReplyDelete
  61. Thanks for your informative article. This article is very informative for us. Thank You for this amazing knowledge.
    Download Call of Duty Mobile Hack Script

    ReplyDelete
  62. I really loved reading your blog. It was very well authored and easy to understand.

    Your Website Has outstanding .

    thanks for shareing
    bio
    ration card

    ReplyDelete
  63. Thanks for your informative article. This article is very informative for us. Thank You for this amazing knowledge.
    Download Call of Duty Mobile Hack Script

    ReplyDelete

Post a Comment

Popular posts from this blog

2 ways to get SQLite to put dates into columns

Bootstrap (by Twitter) loading in page content for Popovers