From 05d1877985de2dcd0538f08d7924518eba3dfc22 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Fri, 19 Dec 2014 18:46:15 -0800 Subject: [PATCH] update JS to use .{tooltip,popover}-{left,right,top,bottom} --- js/popover.js | 2 +- js/tests/unit/tooltip.js | 24 ++++++++++++------------ js/tooltip.js | 10 +++++----- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/js/popover.js b/js/popover.js index 8aed51d2b1..085584fe87 100644 --- a/js/popover.js +++ b/js/popover.js @@ -50,7 +50,7 @@ this.options.html ? (typeof content == 'string' ? 'html' : 'append') : 'text' ](content) - $tip.removeClass('fade top bottom left right in') + $tip.removeClass('fade popover-top popover-bottom popover-left popover-right in') // IE8 doesn't accept hiding via the `:empty` pseudo selector, we have to do // this manually by checking the contents. diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index eb578c22af..6232ccdcb3 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -85,7 +85,7 @@ $(function () { .bootstrapTooltip({ placement: 'bottom' }) $tooltip.bootstrapTooltip('show') - ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied') + ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied') $tooltip.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'tooltip removed') @@ -300,8 +300,8 @@ $(function () { test('should add position class before positioning so that position-specific styles are taken into account', function () { var styles = '' var $styles = $(styles).appendTo('head') @@ -384,7 +384,7 @@ $(function () { .bootstrapTooltip({ placement: 'auto' }) $topTooltip.bootstrapTooltip('show') - ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom') + ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom') $topTooltip.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'top positioned tooltip removed from dom') @@ -394,7 +394,7 @@ $(function () { .bootstrapTooltip({ placement: 'right auto' }) $rightTooltip.bootstrapTooltip('show') - ok($('.tooltip').is('.left'), 'right positioned tooltip is dynamically positioned left') + ok($('.tooltip').is('.tooltip-left'), 'right positioned tooltip is dynamically positioned left') $rightTooltip.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'right positioned tooltip removed from dom') @@ -404,7 +404,7 @@ $(function () { .bootstrapTooltip({ placement: 'auto left' }) $leftTooltip.bootstrapTooltip('show') - ok($('.tooltip').is('.right'), 'left positioned tooltip is dynamically positioned right') + ok($('.tooltip').is('.tooltip-right'), 'left positioned tooltip is dynamically positioned right') $leftTooltip.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'left positioned tooltip removed from dom') @@ -430,7 +430,7 @@ $(function () { }) $target.bootstrapTooltip('show') - ok($('.tooltip').is('.top'), 'top positioned tooltip is dynamically positioned to top') + ok($('.tooltip').is('.tooltip-top'), 'top positioned tooltip is dynamically positioned to top') $target.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'tooltip removed from dom') @@ -455,7 +455,7 @@ $(function () { }) $target.bootstrapTooltip('show') - ok($('.tooltip').is('.bottom'), 'top positioned tooltip is dynamically positioned to bottom') + ok($('.tooltip').is('.tooltip-bottom'), 'top positioned tooltip is dynamically positioned to bottom') $target.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'tooltip removed from dom') @@ -481,7 +481,7 @@ $(function () { $('#scrollable-div').scrollTop(100) $target.bootstrapTooltip('show') - ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied') + ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied') $target.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'tooltip removed from dom') @@ -507,7 +507,7 @@ $(function () { $('#scrollable-div').scrollTop(200) $target.bootstrapTooltip('show') - ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied') + ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied') $target.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'tooltip removed from dom') @@ -537,7 +537,7 @@ $(function () { $('#scrollable-div').scrollTop(200) $target.bootstrapTooltip('show') - ok($('.tooltip').is('.fade.bottom.in'), 'has correct classes applied') + ok($('.tooltip').is('.fade.tooltip-bottom.in'), 'has correct classes applied') $target.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'tooltip removed from dom') @@ -563,7 +563,7 @@ $(function () { $('#scrollable-div').scrollTop(400) $target.bootstrapTooltip('show') - ok($('.tooltip').is('.fade.top.in'), 'has correct classes applied') + ok($('.tooltip').is('.fade.tooltip-top.in'), 'has correct classes applied') $target.bootstrapTooltip('hide') equal($('.tooltip').length, 0, 'tooltip removed from dom') diff --git a/js/tooltip.js b/js/tooltip.js index bd376f7727..9d3074cc04 100644 --- a/js/tooltip.js +++ b/js/tooltip.js @@ -177,7 +177,7 @@ $tip .detach() .css({ top: 0, left: 0, display: 'block' }) - .addClass(placement) + .addClass(this.type + '-' + placement) .data('bs.' + this.type, this) this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) @@ -187,7 +187,7 @@ var actualHeight = $tip[0].offsetHeight if (autoPlace) { - var orgPlacement = placement + var origPlacement = placement var $container = this.options.container ? $(this.options.container) : this.$element.parent() var containerDim = this.getPosition($container) @@ -198,8 +198,8 @@ placement $tip - .removeClass(orgPlacement) - .addClass(placement) + .removeClass(this.type + '-' + origPlacement) + .addClass(this.type + '-' + placement) } var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight) @@ -283,7 +283,7 @@ var title = this.getTitle() $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) - $tip.removeClass('fade in top bottom left right') + $tip.removeClass('fade in tooltip-top tooltip-bottom tooltip-left tooltip-right') } Tooltip.prototype.hide = function (callback) {