Thursday, March 8, 2012

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__

10 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. Great article. Keep sharing such a useful post.


    php training in chennai

    ReplyDelete