add template option and make title an optional attribute for popover

3 files changed, 29 insertions, 5 deletions

diff --git a/docs/javascript.html b/docs/javascript.html
index 3aac2a82f..b80ff58fc 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -553,6 +553,12 @@ $('#.tabs').bind('change', function (e) {
                <td>'hover'</td>
                <td>how tooltip is triggered - hover | focus | manual</td>
              </tr>
+             <tr>
+               <td>template</td>
+               <td>string</td>
+               <td>[default markup]</td>
+               <td>The html template used for rendering a twipsy.</td>
+             </tr>
             </tbody>
           </table>
           <p><span class="label notice">Notice</span> Individual twipsy instance options can alternatively be specified through the use of data attributes.</code></p>
@@ -679,6 +685,12 @@ $('#.tabs').bind('change', function (e) {
                <td>'hover'</td>
                <td>how tooltip is triggered - hover | focus | manual</td>
              </tr>
+             <tr>
+               <td>template</td>
+               <td>string</td>
+               <td>[default markup]</td>
+               <td>The html template used for rendering a popover.</td>
+             </tr>
             </tbody>
           </table>
           <p><span class="label notice">Notice</span> Individual popover instance options can alternatively be specified through the use of data attributes.</code></p>
@@ -693,7 +705,7 @@ $('#.tabs').bind('change', function (e) {
           <p>Hides an elements popover.</p>
           <pre class="prettyprint linenums">$('#element').popover('hide')</pre>
           <h3>Demo</h3>
-          <a href="#" class="btn danger" rel="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
+          <a href="#" class="btn danger" rel="popover" title="A title" data-content="And here's some amazing content. It's very engaging. right?">hover for popover</a>
           <script>
             $(function () {
               $("a[rel=popover]")
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index e8f4ce096..95ca39ab7 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -41,6 +41,10 @@
       $tip[0].className = 'popover'
     }
 
+  , hasContent: function () {
+      return this.getTitle() || this.getContent()
+    }
+
   , getContent: function () {
       var content
        , $e = this.$element
@@ -57,7 +61,7 @@
   , 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>')
+          .html(this.options.template)
       }
       return this.$tip
     }
@@ -74,6 +78,9 @@
     return this
   }
 
-  $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, { placement: 'right'})
+  $.fn.popover.defaults = $.extend({} , $.fn.twipsy.defaults, {
+    placement: 'right'
+  , template: '<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>'
+  })
 
 }( window.jQuery || window.ender );
\ No newline at end of file
diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js
index f0e5b1b90..6066ab06a 100644
--- a/js/bootstrap-twipsy.js
+++ b/js/bootstrap-twipsy.js
@@ -72,7 +72,7 @@
         , $tip
         , tp
 
-      if (this.getTitle() && this.enabled) {
+      if (this.hasContent() && this.enabled) {
         $tip = this.tip()
         this.setContent()
 
@@ -145,6 +145,10 @@
       }
     }
 
+  , hasContent: function () {
+      return this.getTitle()
+    }
+
   , getTitle: function() {
       var title
         , $e = this.$element
@@ -165,7 +169,7 @@
 
   , tip: function() {
       if (!this.$tip) {
-        this.$tip = $('<div class="twipsy" />').html('<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>')
+        this.$tip = $('<div class="twipsy" />').html(this.options.template)
       }
       return this.$tip
     }
@@ -296,6 +300,7 @@
   , offset: 0
   , title: 'title'
   , trigger: 'hover'
+  , template: '<div class="twipsy-arrow"></div><div class="twipsy-inner"></div>'
   }
 
   $.fn.twipsy.elementOptions = function(ele, options) {