adds popover js

bootstrap-1.1.1.css

@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Aug 27 13:05:58 PDT 2011
+ * Date: Sat Aug 27 16:19:56 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -1896,6 +1896,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .modal-backdrop,
 .modal,
 .twipsy,
+.popover,
 .alert-message {
   -webkit-transition: opacity 0.15s linear;
   -moz-transition: opacity 0.15s linear;
@@ -1907,6 +1908,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .modal-backdrop.show,
 .modal.show,
 .twipsy.show,
+.popover.show,
 .alert-message.show {
   opacity: 1;
 }

bootstrap-1.1.1.min.css

@@ -246,4 +246,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .popover .inner{background-color:#333;background-color:rgba(0, 0, 0, 0.8);*background-color:#333;padding:3px;overflow:hidden;width:280px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);}
 .popover .title{background-color:#f5f5f5;padding:9px 15px;line-height:1;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;border-bottom:1px solid #eee;}
 .popover .content{background-color:#ffffff;padding:14px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.popover .content p,.popover .content ul,.popover .content ol{margin-bottom:0;}
-.modal-backdrop,.modal,.twipsy,.alert-message{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.show,.modal.show,.twipsy.show,.alert-message.show{opacity:1;}
+.modal-backdrop,.modal,.twipsy,.popover,.alert-message{-webkit-transition:opacity 0.15s linear;-moz-transition:opacity 0.15s linear;-ms-transition:opacity 0.15s linear;-o-transition:opacity 0.15s linear;transition:opacity 0.15s linear;opacity:0;}.modal-backdrop.show,.modal.show,.twipsy.show,.popover.show,.alert-message.show{opacity:1;}

examples/assets/js/bootstrap-popover.js

@@ -0,0 +1,67 @@
+ /* EXTENDS BOOTSTRAP-TWIPSY.js
+    =========================== */
+
+(function( $ ) {
+
+ /* POPOVER PUBLIC CLASS DEFINITION
+  * ============================== */
+
+  var Popover = function ( element, options ) {
+    this.$element = $(element)
+    this.options = options
+    this.enabled = true
+  }
+
+  Popover.prototype = $.extend({}, $.fn.twipsy.Twipsy.prototype, {
+
+    setContent: function () {
+      var $tip = this.tip()
+      $tip.find('.title')[this.options.html ? 'html' : 'text'](this.getTitle())
+      $tip.find('.content p')[this.options.html ? 'html' : 'text'](this.getContent())
+      $tip[0].className = 'popover'
+    }
+
+  , fixTitle: function () {}
+
+  , getTitle: function () {
+      var title
+      if (typeof this.options.title == 'string') {
+        title = this.options.title || this.$element.attr('data-title')
+      } else if (typeof this.options.title == 'function') {
+        title = this.options.title.call(this.$element[0])
+      }
+      return title
+    }
+
+  , getContent: function () {content
+      var content
+      if (typeof this.options.content == 'string') {
+        content = this.options.content || this.$element.attr('data-content')
+      } else if (typeof this.options.content == 'function') {
+        content = this.options.content.call(this.$element[0])
+      }
+      return content
+    }
+
+  , tip: function() {
+      if (!this.$tip) {
+        this.$tip = $('<div class="popover" />')
+          .html('<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>')
+      }
+      return this.$tip
+    }
+
+  })
+
+
+ /* POPOVER PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.popover = function (options) {
+    if (typeof options == 'object') options = $.extend({}, $.fn.popover.defaults, options)
+    $.fn.twipsy.initWith.call(this, options, Popover)
+  }
+
+  $.fn.popover.defaults = $.extend({}, $.fn.twipsy.defaults, { content: '', placement: 'right'})
+
+})( jQuery || ender )

examples/assets/js/bootstrap-twipsy.js

@@ -44,18 +44,16 @@
   Twipsy.prototype = {
 
     show: function() {
-      var title = this.getTitle()
-        , pos
+      var pos
         , actualWidth
         , actualHeight
         , placement
         , $tip
         , tp
 
-      if (title && this.enabled) {
+      if (this.getTitle() && this.enabled) {
         $tip = this.tip()
-        $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](title)
-        $tip[0].className = 'twipsy'
+        this.setContent()
         $tip
           .remove()
           .css({ top: 0, left: 0, display: 'block' })
@@ -92,6 +90,12 @@
       }
     }
 
+  , setContent: function () {
+      var $tip = this.tip()
+      $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle())
+      $tip[0].className = 'twipsy'
+    }
+
   , hide: function() {
       var that = this
         , $tip = this.tip()
@@ -174,10 +178,14 @@
    }
 
 
- /* MODAL PLUGIN DEFINITION
-  * ======================= */
+ /* TWIPSY PLUGIN DEFINITION
+  * ======================== */
 
-  $.fn.twipsy = function(options) {
+  $.fn.twipsy = function (options) {
+    $.fn.twipsy.initWith.call(this, options, Twipsy)
+  }
+
+  $.fn.twipsy.initWith = function (options, Constructor) {
 
     var twipsy
       , binder
@@ -200,7 +208,7 @@
       var twipsy = $.data(ele, 'twipsy')
 
       if (!twipsy) {
-        twipsy = new Twipsy(ele, $.fn.twipsy.elementOptions(ele, options))
+        twipsy = new Constructor(ele, $.fn.twipsy.elementOptions(ele, options))
         $.data(ele, 'twipsy', twipsy)
       }
 
@@ -253,6 +261,8 @@
     return this
   }
 
+  $.fn.twipsy.Twipsy = Twipsy
+
   $.fn.twipsy.defaults = {
     delayIn: 0
   , delayOut: 0

examples/bootstrap-js.html

@@ -16,7 +16,8 @@
     <script src="assets/js/bootstrap-modal.js"></script>
     <script src="assets/js/bootstrap-alerts.js"></script>
     <script src="assets/js/bootstrap-twipsy.js"></script>
-    <!-- <script src="assets/js/bootstrap-popovers.js"></script> -->
+    <script src="assets/js/bootstrap-popover.js"></script>
+    <!-- <script src="assets/js/bootstrap-dropdown.js"></script> -->
 
     <!-- Le styles -->
     <link href="../bootstrap-1.1.1.css" rel="stylesheet">
@@ -41,6 +42,7 @@
             <li><a href="#modal">Modals</a></li>
             <li><a href="#alerts">Alerts</a></li>
             <li><a href="#twipsy">Twipsy</a></li>
+            <li><a href="#popover">Popover</a></li>
           </ul>
         </div>
       </div>
@@ -53,14 +55,14 @@
 
     <section id="javascript">
       <div class="page-header">
-        <h1>Using Javascript with Less <small>A love story.</small></h1>
+        <h1>Using Javascript with Bootstrap <small>A love story.</small></h1>
       </div>
       <div class="row">
         <div class="span4 columns">
           <p>This page illustrates how to integrate javascript with the Bootstrap library. Below we go over the basics and provide you with some awesome plugins to get you started!</p>
         </div>
         <div class="span12 columns">
-          <h2>What is all this?</h2>
+          <h2>What is this all about?</h2>
           <p>With this example page, we've set out to make your interactive work with Bootstrap even more simple, offering several lightweight plugins for things like modals, tooltips, and other dynamic components. These plugins have been coded up to work with <a href="http://jquery.com/" target="_blank">jQuery</a> and <a href="http://ender.no.de" target="_blank">Ender</a>, but we encourage you to extend and modify them to fit your development needs!</p>
           <h2>Do I need these?</h2>
           <p>The short answer is <strong>NO!</strong> These plugins were provided to help you understand how to integrate bootstrap with javascript and to give you a quick lightweight option for dropping something in and getting the basic functionality.
@@ -214,8 +216,10 @@ $('#modal-content').modal({
           <h4>$().twipsy</h4>
           <p>Attaches a twipsy handler to an element collection.</p>
           <h3>Demo</h3>
-          <p>Mustache next level keffiyeh you <a href="#" rel='twipsy' title='Some title text'>probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown you probably haven't heard of them before they sold out. Farm-to-table <a href="#" rel='twipsy' title='i <3 cardigans'>cardigans</a> seitan tofu, mcsweeney's fixie sustainable quinoa 8-bit american apparel terry richardson vinyl chambray. Fap beard stumptown, <a href="#" rel='twipsy' title='Another twipsy'>williamsburg</a> banh mi lomo thundercats. DIY tofu biodiesel marfa, four loko mcsweeney's master cleanse vegan chambray. Etsy fap ethical, wes anderson farm-to-table +1 whatever bicycle rights mixtape portland readymade letterpress artisan. Four loko artisan whatever keytar, scenester farm-to-table <a href="#" rel='twipsy' title='The last tip!'>PBR</a> banksy Austin freegan cred raw denim single-origin coffee viral.
-          </p>
+          <div class="well">
+            <p class="muted">Tight pants next level keffiyeh <a href="#" rel='twipsy' title='Some title text'>you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" rel='twipsy' title='Another twipsy'>have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A <a href="#" rel='twipsy' title='Another one here too'>really ironic</a> artisan whatever keytar, scenester farm-to-table banksy Austin <a href="#" rel='twipsy' title='The last tip!'>twitter handle</a> freegan cred raw denim single-origin coffee viral.
+            </p>
+          </div>
           <script>
             $(function () {
               $("a[rel=twipsy]").twipsy({
@@ -227,6 +231,49 @@ $('#modal-content').modal({
       </div>
     </section>
 
+    <!-- Popovers
+    ================================================== -->
+
+    <section id="popover">
+      <div class="page-header">
+        <h1>Popovers <small>bootstrap-popover.js</small></h1>
+      </div>
+      <div class="row">
+        <div class="span4 columns">
+          <p>The popover plugin provides a simple interface for adding popovers to your application. It extends the <a href="#twipsy">boostrap-twipsy.js</a> plugin, so be sure to grab that file as well when including popovers in your project!</p>
+          <a href="assets/js/bootstrap-popover.js" class="btn primary">Download</a>
+        </div>
+        <div class="span12 columns">
+          <h2>Using boostrap-popover.js</h2>
+          <pre class="prettyprint linenums">$('#example').popover(options)</pre>
+          <h3>Options</h3>
+          <ul>
+            <li><strong>delayIn</strong> (<code>number</code>) - delay before showing tooltip (ms).</li>
+            <li><strong>delayOut</strong> (<code>number</code>) - delay before hiding tooltip (ms).</li>
+            <li><strong>fallback</strong> (<code>string</code>) - fallback text to use when no tooltip text.</li>
+            <li><strong>placement</strong> (<code>string</code>) - position of tooltip - above | below | left | right.</li>
+            <li><strong>html</strong> (<code>boolean</code>) - is tooltip content HTML?</li>
+            <li><strong>live</strong> (<code>boolean</code>) - use live event support?</li>
+            <li><strong>offset</strong> (<code>number</code>) - pixel offset of tooltip from element.</li>
+            <li><strong>title</strong> (<code>string|function</code>) - text for title in popover. Alternatively you can specify a <code>data-title</code> attribute.</li>
+            <li><strong>content</strong> (<code>string|function</code>) - text for content in popover. Also you can specify a <code>data-content</code> attibute.</li>
+            <li><strong>trigger</strong> (<code>string</code>) - how tooltip is triggered - hover | focus | manual.</li>
+          </ul>
+          <h3>Methods</h3>
+          <h4>$().popover</h4>
+          <p>Initializes popovers for an element collection.</p>
+          <h3>Demo</h3>
+          <a href="#" class="btn" rel="popover" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover</a>
+          <script>
+            $(function () {
+              $("a[rel=popover]").popover({
+                offset: 10
+              })
+            })
+          </script>
+        </div>
+      </div>
+    </section>
 
     <!-- Section
     ================================================== -->

lib/patterns.less

@@ -755,6 +755,7 @@ input[type=submit].btn {
 .modal-backdrop,
 .modal,
 .twipsy,
+.popover,
 .alert-message {
   .transition(opacity .15s linear);
   opacity: 0;