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. 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. 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. 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. Thanks for this, will give a try.
    404 on http://flowplayer.org/tools/index.html (jquery tools link)

    ReplyDelete
  5. 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
  6. 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
  7. Useful article for bootstrap learners, thanks for sharing. https://www.technologist360.com/

    ReplyDelete
  8. 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
  9. 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

Template Toolkit Debugging inside of Perl Dancer

BootstrapX clickover

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