Merge pull request #554 from rvagg/poveropt

optionable selectors for title & content elements

3 files changed, 47 insertions, 10 deletions

diff --git a/docs/javascript.html b/docs/javascript.html
index 6d6701070..494773512 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -487,8 +487,8 @@ $('#.tabs').bind('change', function (e) {
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
-               <th style="width: 100px;">type</th>
-               <th style="width: 50px;">default</th>
+               <th style="width: 95px;">type</th>
+               <th style="width: 95px;">default</th>
                <th>description</th>
              </tr>
             </thead>
@@ -557,7 +557,7 @@ $('#.tabs').bind('change', function (e) {
                <td>template</td>
                <td>string</td>
                <td>[default markup]</td>
-               <td>The html template used for rendering a twipsy.</td>
+               <td>the html template used for rendering a twipsy</td>
              </tr>
             </tbody>
           </table>
@@ -613,8 +613,8 @@ $('#.tabs').bind('change', function (e) {
             <thead>
              <tr>
                <th style="width: 100px;">Name</th>
-               <th style="width: 100px;">type</th>
-               <th style="width: 50px;">default</th>
+               <th style="width: 95px;">type</th>
+               <th style="width: 95px;">default</th>
                <th>description</th>
              </tr>
             </thead>
@@ -689,7 +689,19 @@ $('#.tabs').bind('change', function (e) {
                <td>template</td>
                <td>string</td>
                <td>[default markup]</td>
-               <td>The html template used for rendering a popover.</td>
+               <td>the html template used for rendering a popover</td>
+             </tr>
+             <tr>
+               <td>titleSelector</td>
+               <td>string</td>
+               <td>.title</td>
+               <td>selector used to find the title element within the popover</td>
+             </tr>
+             <tr>
+               <td>contentSelector</td>
+               <td>string</td>
+               <td>.content p</td>
+               <td>selector used to find the content element within the popover</td>
              </tr>
             </tbody>
           </table>
diff --git a/js/bootstrap-popover.js b/js/bootstrap-popover.js
index c63778415..e8b49af3c 100644
--- a/js/bootstrap-popover.js
+++ b/js/bootstrap-popover.js
@@ -36,8 +36,8 @@
 
     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.find(this.options.titleSelector)[this.options.html ? 'html' : 'text'](this.getTitle())
+      $tip.find(this.options.contentSelector)[this.options.html ? 'html' : 'text'](this.getContent())
       $tip[0].className = 'popover'
     }
 
@@ -83,8 +83,10 @@
     placement: 'right'
   , content: 'data-content'
   , template: '<div class="arrow"></div><div class="inner"><h3 class="title"></h3><div class="content"><p></p></div></div>'
+  , titleSelector: '.title'
+  , contentSelector: '.content p'
   })
 
   $.fn.twipsy.rejectAttrOptions.push( 'content' )
 
-}( window.jQuery || window.ender );
\ No newline at end of file
+}( window.jQuery || window.ender );
diff --git a/js/tests/unit/bootstrap-popover.js b/js/tests/unit/bootstrap-popover.js
index 3e13d2fd2..823526727 100644
--- a/js/tests/unit/bootstrap-popover.js
+++ b/js/tests/unit/bootstrap-popover.js
@@ -73,4 +73,27 @@ $(function () {
         $('#qunit-runoff').empty()
       })
 
-})
\ No newline at end of file
+      test("should allow arbitrary template html with title and content selector options", function() {
+        $.support.transition = false
+        var expectedTitle = 'Gotta make you understand'
+          , popover = $('<a href="#">@rvagg</a>')
+              .attr('title', expectedTitle)
+              .attr('data-content', '<p><b>Never gonna give you up</b>,</p><p>Never gonna let you down</p>')
+              .appendTo('#qunit-runoff')
+              .popover({
+                    html: true
+                  , titleSelector: 'h1'
+                  , contentSelector: '.rick > .roll'
+                  , template: '<div class="rick"><h1></h1><div class="roll"></div></div>'
+                })
+              .popover('show')
+
+        ok($('.popover > div > h1').length, 'h1 tag was inserted')
+        ok($('.popover > div > h1').text() === expectedTitle)
+        ok($('.popover > .rick > .roll > p').length === 2, 'p > b tags were inserted')
+        popover.popover('hide')
+        ok(!$('.popover').length, 'popover was removed')
+        $('#qunit-runoff').empty()
+      })
+
+})