Bootstrap (by Twitter) loading in page content for Popovers

Bootstrap is a nice get started HTML/CSS/JS interface toolkit. At $work our newest design has been based on it and many of its components.

One of the challenges I've run into with the Popover element is generating in attribute content for complex elements.

The basic context is: 
<a id="mypopover" href="#" data-content="stuff to display"> Label </a>

The popover gets the body from the data-content attribute. The other option that doesn't appear to be documented is using a function set in the options.

$('#mypopover').popover({
   // other options here
   content: function(ele) { return $('#popover-content').html(); }
});

This will load the html content from element '#popover-content' when calling 'show' on popover.

Note: If trigger element still has a data-content element, even if its empty, the content function will not be called by method.

My biggest issue still with Bootstrap tools is that they are not generally designed to be used with externally loaded content. Therefore to load this type of content I still need to setup lots of manually event handlers. It seems like jQuery Tools has a bit more complete event model today. But Bootstrap is still very young.

__END__

Comments

  1. DogokuJuly 10, 2012 at 7:07 AM

    Brilliant, thx!

    In the documentation it states that u can use a function as content, but there was no documentation as to how to use it (what it should return etc)

    ReplyDelete
  2. AnonymousJuly 26, 2012 at 7:47 AM

    Hi Lee.

    I'm using your plugin to show one div with two buttons: One to show a alert and other to close the popover.

    The close button works very well, but the alert isn't shown.

    See my code

    I'll appreciate if you could answer.

    Thanks a lot ;)

    ReplyDelete
  3. AnonymousJuly 30, 2012 at 6:41 AM

    Hi Lee.

    I tried a little more and I made this way:

    http://monteirobrena.wordpress.com/2012/07/27/popover-customizado-com-twitter-bootstrap-e-jquery

    ReplyDelete
  4. Pim SchaafSeptember 18, 2012 at 11:13 PM

    Thanks!
    What Dogoku said :)

    ReplyDelete
  5. UnknownJanuary 22, 2013 at 6:53 AM

    Thanks for this, will give a try.
    404 on http://flowplayer.org/tools/index.html (jquery tools link)

    ReplyDelete
  6. MarocNewsMay 31, 2013 at 4:49 AM

    Merci beaucoup :)

    ReplyDelete
  7. UnknownApril 30, 2016 at 11:04 AM

    I want you to thank for your time of this wonderful read!!! I definately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog!!!! free stock photos

    ReplyDelete
  8. UnknownMay 2, 2016 at 6:59 AM

    sms are messaging software for business to send marketing & advertising SMS messages to customers with mobile phone from PC in this site SMS Marketing software

    ReplyDelete
  9. Alex KevinAugust 6, 2018 at 9:45 AM

    Useful article for bootstrap learners, thanks for sharing. https://www.technologist360.com/

    ReplyDelete
  10. suvathiAugust 31, 2018 at 7:24 AM

    admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.
    Bootstrap Training in Chennai

    ReplyDelete
  11. Praylin SNovember 18, 2018 at 11:37 PM

    I'm greatly impressed by your article. That's a lot of information. Thanks for sharing this informative post.
    Javascript Training in Chennai | Javascript Training Center in Chennai | Javascript Training Institute in Chennai | Javascript Course

    ReplyDelete
  12. Anjali SivaAugust 13, 2019 at 7:30 AM

    Such an amazing blog with new updates. I love to learn more about this topic. Waiting for more like this.
    Microsoft Dynamics crm Training in Chennai
    Microsoft Dynamics Training in Chennai
    Microsoft Dynamics crm Training institutes in Chennai
    Salesforce Training in Chennai
    AngularJS Training in Chennai
    Tally Training in Chennai
    ccna course in Chennai
    Microsoft Dynamics crm Training in Velachery
    Microsoft Dynamics crm Training in T Nagar
    Microsoft Dynamics crm Training in OMR

    ReplyDelete
  13. odinpaderewskiMarch 4, 2022 at 6:49 PM

    Borgata Hotel Casino & Spa - Mapyro
    Borgata Hotel 전라남도 출장샵 Casino 광명 출장마사지 & Spa, Atlantic City, 전라북도 출장안마 NJ. Map. See map. View reviews. Location. Borgata Hotel Casino 군포 출장안마 & 대전광역 출장샵 Spa,

    ReplyDelete

Post a Comment

Popular posts from this blog

Changing Dancer::Plugin::Ajax's content type

Dancer does lots of great things. It has a nice clean way to define routes to handle AJAX routes using the plugin Dancer::Plugin::Ajax . ajax routes are defined in a clear way: ajax '/stuff' => sub { # do work and return }; This plugin technique allows for clear way to separate between ajax and other types of actions for the same route. ajax '/stuff' => sub { # do ajax-y stuff here }; get '/stuff' => sub { # handle html response }; Unfortunately, the one negative with Dancer::Plugin::Ajax is that is assumes all responses will be XML. A quick fix is to manually set the content type in each ajax handler. ajax '/stuff' => sub { content_type('application/json'); # do work }; or add set it as a general option in your main before hook or in each prefix route handler like: package WebApp; hook before => sub { if ( request->is_ajax ) { content_type('application/json'); } }; ...
Read more

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...
Read more

2 ways to get SQLite to put dates into columns

2 ways to get SQLite to put dates into a column. insert into mytable values( null, datetime('now') ); insert into mytable values( null, strftime('%s', 'now')); The first one inserts a row somewhat like this: 1|2009-03-10 18:47:46 The second inserts an unix timestamp: 2|1236711411 It might be best to use that unix timestamp with an integer column type for dates since SQLite doesn't support a datetime one. It makes comparisons and ordering much easier: select * from dt where lu > strftime('%s', '2009-03-10'); Output of: id|lu 6|1236643200 2|1236711411 3|1236711516 4|1236711518 5|1236711519 But the formatting is pretty ugly. :-/ Hey what about formatting it within the select with the SQLite datetime function: select id, datetime(lu, 'unixepoch') lu from dt order by lu; id|lu 6|2009-03-10 00:00:00 2|2009-03-10 18:56:51 3|2009-03-10 18:58:36 4|2009-03-10 18:58:38 5|2009-03-10 18:58:39 Better but having to add that to each select is kin...
Read more