diff --git a/docs/javascript.html b/docs/javascript.html index 82dcffba75..90b7be0c53 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -487,8 +487,8 @@ $('#.tabs').bind('change', function (e) { Name - type - default + type + default description @@ -557,7 +557,13 @@ $('#.tabs').bind('change', function (e) { template string [default markup] - The html template used for rendering a twipsy. + the html template used for rendering a twipsy + + + contentSelector + string + .twipsy-inner + selector used to find the title element within the tooltip @@ -613,8 +619,8 @@ $('#.tabs').bind('change', function (e) { Name - type - default + type + default description @@ -689,7 +695,19 @@ $('#.tabs').bind('change', function (e) { template string [default markup] - The html template used for rendering a popover. + the html template used for rendering a popover + + + titleSelector + string + .title + selector used to find the title element within the popover + + + contentSelector + string + .content p + selector used to find the content element within the popover diff --git a/js/bootstrap-twipsy.js b/js/bootstrap-twipsy.js index e249c815d7..9eb6e79f4e 100644 --- a/js/bootstrap-twipsy.js +++ b/js/bootstrap-twipsy.js @@ -119,7 +119,7 @@ , setContent: function () { var $tip = this.tip() - $tip.find('.twipsy-inner')[this.options.html ? 'html' : 'text'](this.getTitle()) + $tip.find(this.options.contentSelector)[this.options.html ? 'html' : 'text'](this.getTitle()) $tip[0].className = 'twipsy' } @@ -302,10 +302,11 @@ , title: 'title' , trigger: 'hover' , template: '
' + , contentSelector: '.twipsy-inner' } $.fn.twipsy.elementOptions = function(ele, options) { return $.extend({}, options, $(ele).data()) } -}( 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 3e13d2fd20..69f3e0d7fa 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 = $('@rvagg') + .attr('title', expectedTitle) + .data('content', '

Never gonna give you up,

Never gonna let you down

') + .appendTo('#qunit-runoff') + .popover({ + html: true + , titleSelector: 'h1' + , contentSelector: '.rick > .roll' + , template: '

' + }) + .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() + }) + +}) diff --git a/js/tests/unit/bootstrap-twipsy.js b/js/tests/unit/bootstrap-twipsy.js index 04000696ae..74855931a6 100644 --- a/js/tests/unit/bootstrap-twipsy.js +++ b/js/tests/unit/bootstrap-twipsy.js @@ -78,4 +78,22 @@ $(function () { $('#qunit-runoff').empty() }) -}) \ No newline at end of file + test("should allow arbitrary template html with content selector options", function() { + $.support.transition = false + var twipsy = $('') + .appendTo('#qunit-runoff') + .twipsy({ + html: true + , contentSelector: 'h1' + , template: '

Funky Twipsy!

@rvagg was here

' + }) + .twipsy('show') + + ok($('.twipsy h1').length, 'h1 tag was inserted') + ok($('.twipsy p>b').length, 'p > b tags were inserted') + ok($('.twipsy h1>b').length, 'h1 tag was customised') + twipsy.twipsy('hide') + ok(!$(".twipsy").length, 'twipsy removed') + $('#qunit-runoff').empty() + }) +})